Refactoring a React Component (Design Patterns)

VSCode Theme | Font → Material Theme Darker | Menlo, Monaco "monospace"

In this video I will show you how to refactor a React component using design patterns. We are going to take a complex and messy component, and refactor it to make use of reusable components, custom hooks, and efficient senior-level React code!

[jaimishtrivedi]

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 👍

[rodicabalan]

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<"input"> and just love watching how others refactor, it's sped up my React journey learning this way.

[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 ❤

[danieldefoe]

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 <TextInput /> 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.

[MattElisa]

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

[nikawuladze]

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

[ericng]

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

[spizer]

amazing content, expecting more on future❤

[tomvj]

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....!

[gauravbawa]

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

[GERA]

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

[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😂

[ptolemyhenson]

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.

[nberdoober]

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

[griffin]

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?

[kalideb-yy]

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

[shahwaizkarim-hz]

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

[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 😁