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 👍
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 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
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 ❤
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
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.
@@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)
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
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😂
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....!
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.
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.
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
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.
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 😁
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 👍
We need more refactoring videos! Thanks for the effort❤
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.
Why you switch from vue to react?
@@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
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 ❤
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
Yeah and he should have done name: Path so if he puts in the wrong "name" in text input, typescript would complain
Very clear explanation, I love it
wooooooow amazing content, expecting more on future❤
This type of videos are sk useful. Ty for that ❤ .
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.
Fair, I found myself rarely needing a text input without an attached form in a project, but if you do then yeah definitely
@@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)
We need more videos like that one!
Excellent video 🎉
That's great my friend!
I love this style of code refactoring video. Just a tiny bit slower and it would be perfect. But I love it !! thanks
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
Nice video again 👏👍
Great video! Thank you ❤
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😂
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....!
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.
ahh it does, didn't know about it until now. thanks!
@codesen I tried to subscribe for your newsletter however, it keep showing alert for error.
Can you please tell, which extension you used for "rjfcp" snippet at 8:40 ? I can't find it in marketplace
my own custom snipper, check out my vscode setup video!
@@cosdensolutions Awesome ❤
would you recommend zustand instead of redux? why, would you make a video of differents state managements (Y), thanks
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?
I'm pretty sure that's GitHub Copilot.
@@ptolemyhenson6838 So he is using Copilot during his video tutorials?
he mentioned somewhere "CoPilot" here at 15:27
Good stuff, a like and sub!
這部影片太他媽的讚了
whats the shortcut extension
Can you create an exclusive video on Design Pattern required for ReactJS Developer for developing UI with efficient working.
should I not use "any" in typescript no matter what? for example in real world project
what would happen if we have passed register as a prop instead of control. like {...register(name)}.
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.
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
@@cosdensolutions You are right. I looked at it wrong, I thought you were going to use `[deps]`, then it would have been a problem.
thanksssssss
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 😁
First😍
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.
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 😁