Refactoring a React Component (Design Patterns)

[@jaimishtrivedi392]

In the last... The TextInput component you were using were actually wrapped inside div, and if you pass className 50% to input, you would get the half width of that div, previously you were directly using inputs inside parent div, you have to give 50% width to align those two inputs. But now you don't need it, or you have to provide full width 👍

[@rodicabalan6565]

We need more refactoring videos! Thanks for the effort❤

[@MickDavies]

Coming from Vue since 2017 and having to upskill in React this year for work, loving your tutorials! The tempo is perfect for me and learned a few new tricks such as the ComponentProps and just love watching how others refactor, it's sped up my React journey learning this way.

[@teknolovedigital]

Why you switch from vue to react?

[@MickDavies]

@@teknolovedigital companies and that was the new tech stack. Nextjs + react. Good to learn new stuff, Vue is superior but I feel confident in both now which is always good for job prospects. I've been doing this for a while now... 15 odd years

[@danieldefoe2981]

Hi, Cosden, thank you for your videos. I want to point out that in 10:05 you should've used a generic instead of any. Just make your component a generic component and pass generic value to the Props

[@dr_jacko]

1 minor niggle with this is that your TextInput is closely coupled with react-hook-form. If I were approaching this, I would either create a TextInput with more generic handlers and values and pass in the relevant functions and values or rename the component to RhfTextInput or similar.

[@cosdensolutions]

Fair, I found myself rarely needing a text input without an attached form in a project, but if you do then yeah definitely

[@TannerBarcelos]

@@cosdensolutionsgreat counterpoint. When I take a step back and think about it, all of my inputs in the products I work on are in a form for proper semantic html, so I’d use this approach as well. It would also enforce consistency in the codebase by forcing others to not only use the reusable component, but always remember to rely on RHF wherever they need to build features that require text inputs. QQ: Have you looked into Tanstack Form? It looks amazing but I’ve yet to try it as it’s not production ready. Once it is, I want to migrate off basic forms and inputs in my product at work to use TSF. (I don’t even use RHF now because of this exact reason; I want to use TSF and don’t want to do 2 refactors so I decided to not use a form library at all up front)

[@SK_Covers]

Broo ❤❤❤ Just watched your React hook form + zod video. Very clear very concise, very understanding, straight to the point. At last it's very very beginner friendly 💯😎🔥 Love from India ❤

[@farrelbatykouima7494]

We need more videos like that one!

[@RonnieDenzel]

I think the red squiggly lines coming from accessing the name key in the errors object is due to the key being a defined value and not the key itself,so typescript throws an expected error as it has no idea such a key is defined or exists However,the JS works fine as the functionality is the same,so to tackle this i usually assert the value to a type,but i didnt know you can get the tostring value of it😂

[@spizer98]

wooooooow amazing content, expecting more on future❤

[@jorgevillafraz2656]

Excellent video 🎉

[@royangagas2519]

Very clear explanation, I love it

[@nikawuladze953]

This type of videos are sk useful. Ty for that ❤ .

[@ericng3673]

Instead of passing control, usually I prefer using useFormContext and add a FormProvider. This doesn't work well if you have multiple forms components as siblings though. Performance wise I am not sure if it is optimized as well

[@MattElisa97]

I love this style of code refactoring video. Just a tiny bit slower and it would be perfect. But I love it !! thanks

[@lupaco26]

That's great my friend!

[@tomvj15]

Your videos are very easy to understand I like your way of Teaching and I would like to enroll your "Project React" course, I am from India right now i don't have a full amount for this course did I get any coupon code from your "Cosden Solution" it will help me lot , Thanks for providing a wonderful content about React keep rocking....!

[@brNoMundo123]

Great video! Thank you ❤

[@alenomer3968]

Nice video again 👏👍

[@OO-jm5qq]

這部影片太他媽的讚了

[@ptolemyhenson6838]

Doesn't React Hook Form have a hook specifically made for handling arrays (something like "useFieldArray" if I remember right)? I thought this tutorial would include that.

[@cosdensolutions]

ahh it does, didn't know about it until now. thanks!

[@Deus-lo-Vuilt]

Good stuff, a like and sub!

[@gauravbawa5609]

@codesen I tried to subscribe for your newsletter however, it keep showing alert for error.

[@justin9494]

thanksssssss

[@ajiteshmishra0005]

Can you create an exclusive video on Design Pattern required for ReactJS Developer for developing UI with efficient working.

[@garudaputro]

Would you please make video about S.O.L.I.D pricple in react it's will be useful for us to be more profesional 😁

[@0GERA0]

would you recommend zustand instead of redux? why, would you make a video of differents state managements (Y), thanks

[@jason.zubiate]

whats the shortcut extension

[@n00berdoober]

Can you please tell, which extension you used for "rjfcp" snippet at 8:40 ? I can't find it in marketplace

[@cosdensolutions]

my own custom snipper, check out my vscode setup video!

[@n00berdoober]

@@cosdensolutions Awesome ❤

[@griffin955]

Hi, what VSCode extensions are you currently using for your tsx files to infer the remainder of the line you're writing so you an autocomplete it?

[@ptolemyhenson6838]

I'm pretty sure that's GitHub Copilot.

[@griffin955]

@@ptolemyhenson6838 So he is using Copilot during his video tutorials?

[@usman_ghanni]

he mentioned somewhere "CoPilot" here at 15:27

[@shahwaizkarim-h9z]

what would happen if we have passed register as a prop instead of control. like {...register(name)}.

[@kalideb-y3y]

should I not use "any" in typescript no matter what? for example in real world project

[@matchu-pitchu]

The fallback empty array for the deps parameter of useKeyDown is not a good idea. Because if no deps are provided, then for every re-render a new empty array as fallback is recreated and the useEffect is unnecessarily executed.

[@cosdensolutions]

Passing an empty array to useEffect doesn't cause it to re-render! It will then just run once since it has no deps. If you pass nothing at all, then it runs every render

[@matchu-pitchu]

@@cosdensolutions You are right. I looked at it wrong, I thought you were going to use `[deps]`, then it would have been a problem.

[@lokeshkavisth]

First😍

[@HolySl0w]

Great video, love it. paced right but i wanna be _THAT GUY_ ... i don't think there are any design pattern in this video. There are best practices, SOLID principles, dependency injection but no design pattern :( that was too much of a clickbait with "the cool word cool coders say" to me. but again... good video, good infos, good stuff.

[@cosdensolutions]

Honestly, if you do a quick Google for design patterns, stuff like this comes up. I'd put SOLID principles in that too since it affects how you structure your project and components/hooks. I don't think there is one definition of design patterns in React otherwise I would've done exactly that 😁