Very well explained, and really good example! The first time I see someone on youtube to use TS properly and to think about reusability and clean architecture! Please keep posting more of your videos!
Glad you enjoyed it and thanks for the feedback! I hope you'll tag along for the next ones as well. I'm recording a few videos about controlled components now and will end up with a clean separation of concerns with those too.
Thanks a lot, I'm actually starting a new project and was thinking of replacing Formik + Yup I used before with the React Hook Form + Zod. The video is really helpful.
@@goldentendon noted, it’s on my list. First I’ll probably do a component integration one, as we will need a few more things not just text inputs moving forward
Thank you! I just spoke at a meetup and presented this exact topic and got a few questions. Some of the next things would be integrating component libraries with more advanced components, more error handling, and conditional fields (showing some fields instead of others based on the content already filled in other fields)
Thank you for your feedback, I’m glad it was useful to you. I’m going to make another one about integrating component libraries soon. I hope you’ll tag along for that one as well 😊
Very interesting! Nice usage of the useImperativeHandle hook, however I suppose that in this case you could've just thrown an error if !response.success and let the SignUpForm component handle it. But this was a nice explanation of it.
@@vlad.nicula thank your video I could make my form that has 4 children components, one of them is a dynamic array of objects with file upload, and another one is a signature canvas.
Great video! I love your considerations for separation of concerns. For the Login button why not give it type="button" instead of preventDefault (I mean for the general example before you wrapped it in Next's Link). Also if we were not using Next (Link) it may be better for accessibility to have an that is only visually styled like a button. And I would like to see what is the best way to pass props when navigating to a new page after the form submit - for example if the backend returns a response with a message "Sign up successful", and we redirect to /, how can we pass this message to be displayed on /?
good points about the button type and the link. And yes, a next link would work better. I used the router push because I already had a router used on the page. Regarding the navigation and data passing, I don’t have a preferred approach. Usually a get param is enough, so a successful login redirects to home?login=success or something like that, or of we want to be fancier the get param is a key that is used to ask the server again for that message. Another approach I saw was to keep a session storage value, that way you only see the message once. Thanks for the feedback and the question. I think I’ll add the button trick in my class next time I teach this 👍
@@vlad.nicula yea sure. Into 20 mins of watching your tutorial and it's very good. Easy to understand, simple, clear and concise. Awesome tutorial buddy.
zod seems to be more adopted by the typescript community and is more likely to grow in the next few years. In 2022 I used both and saw no difference in terms of capabilities between the two 👍
Awesome tutorial, really quality content, I have a question btw, my inputs shrink after the error message dissapears (maybe it's that their sizes are kinda different), any idea you could give me to solve this?
Not sure what you mean by shrink but I did encounter situations where the error message was adding some margin when the message existed, yet when there was no error there was no element to add that space either, so the inputs would move on the screen vertically. Leaving an empty placeholder or adding a css margin on the input when it does not have errors solved this for me
@@vlad.nicula Hey, thanks, by shrink i mean that all the input sizes reduces when the error message dissapears, so i was wondering if there's a way to keep the size consistent
I wonder if it is possible to re-render an SSC from a CSC. For example, I got my Server Component and it's a list of products and one button to add new products which fire a Form (Client component) after filling it, the submit could update the Server List component?
I’ll try to be more mindful when using those hooks in the next videos and point out when we need to use them and why. Thanks for asking 👍 Is there a particular situation in the video that you want to ask about or is your question in general?
apparently it is called Codesandbox Black 2021. I think it is this one: marketplace.visualstudio.com/items?itemName=siddharthkp.codesandbox-black And for the font I use Fira Code: fonts.google.com/specimen/Fira+Code?preview.text=%3D%3E%20()%20!%3D%3D%20!%3D%20%3C%3D%20%3E%3D%20%7B%7D&preview.text_type=custom
Very well explained, and really good example! The first time I see someone on youtube to use TS properly and to think about reusability and clean architecture! Please keep posting more of your videos!
thanks! I’ll keep posting 👍
I am glad I've just completed the entire video
Much informative and exciting!
Thanks a million
This is awesome!! Great work with separating concerns and handling that server error with useImperetive Hook is such a chef's kiss.
Glad you enjoyed it and thanks for the feedback! I hope you'll tag along for the next ones as well. I'm recording a few videos about controlled components now and will end up with a clean separation of concerns with those too.
I agree, I never thought about using that hook for server-side error handling on my React-hook-forms. It's amazing :D
@@merotuts9819 thanks 🙏 I’m happy it is helpful
Those technologies you're using seem promising, looking forward to the series!
thanks! I’ll see what questions I receive this week and create a few answer videos related to this next 👍
And i m here to help you 🙃
Lol useImperativeHandle was not on my radar but figured useRef would get used. Nice video.
Thanks! 👍
This is awesome! Thanks for creating those.
well hello there ☺️. Sure, my pleasure. I’m surprised you found this video 😮😅 Thank you for creating and maintaining such an awesome form library👍
🚀 keep it up with awesome content 🚀
Thanks a lot, I'm actually starting a new project and was thinking of replacing Formik + Yup I used before with the React Hook Form + Zod. The video is really helpful.
thank you for your feedback, I’m glad it was helpful! ☺️
Just what i wanted got recommended! Keep going bro!
thank you for your feedback 🙏I will continue to record some form videos next month
Here from reddit
Hopefully I will learn something new
Excited
Thank you
thanks for the feedback! I hope you'll tag alone in the next ones as well 👍
helping you to break youtube algorithm
thank you kindly :D
Great.
Here from reddit.
welcome, thanks for joining, I hope you'll tag alone in the next ones as well 👋
Looking foward to the videos, subbed. I was mid refactoring an old project with React Hook Form, this came into a very good timing for me.
Welcome aboard! I'm happy to hear this helps, and I hope you'll tag along for the next ones.
This is really interesting approach. learn a lot. thanks!
Glad to hear that! I'll release more stuff like this related to forms for a while, I hope you'll tag along for the next ones!
A much needed video Vlad. 🙆♂ Could you also do one on error validation on Controlled components using React-hook-form & zod ?
yeah, I am. Check out the date picker one, it might be enough. Zod or normal validation should work the same way.
Awesome video . Great in depth guide to awesome libraries
Thank you kindly! I hope you'll tag along for the next ones as well!
@@vlad.nicula if you could make a multi step form with the same stack that would be awesome!
@@goldentendon noted, it’s on my list. First I’ll probably do a component integration one, as we will need a few more things not just text inputs moving forward
A very informative video. I can't wait to see what else you're able to produce!
Thank you! I just spoke at a meetup and presented this exact topic and got a few questions. Some of the next things would be integrating component libraries with more advanced components, more error handling, and conditional fields (showing some fields instead of others based on the content already filled in other fields)
Congrats Vlad on your first video! 🚀
Thanks Bogdan! Happy to see you here. I hope you'll tag along in the next ones as well :D
Excellent video! Congratulations!
Thank you very much! I hope you'll tag along for the next ones!
Hey, thanks for putting this out there this video was really helpful
Thank you for your feedback, I’m glad it was useful to you. I’m going to make another one about integrating component libraries soon. I hope you’ll tag along for that one as well 😊
@@vlad.nicula yes sure, definitely
That is very helpful, keep it up! 💯
Thanks, will do!
Very interesting! Nice usage of the useImperativeHandle hook, however I suppose that in this case you could've just thrown an error if !response.success and let the SignUpForm component handle it. But this was a nice explanation of it.
yeah that works too but sometimes you also wanna focus the first field that has an error 👍
Great explanation Bro ☺️
Glad you liked it. I’m working on another one about integrating component libraries with RHF. I hope you’ll tag along for that one as well 😊
Thank you, great stuff!
thanks for the feedback! I hope you'll join me for the next one as well! :)
This is great!
I've used Yup with hook form, but it's not as good as Zod when we have typescript.
I should probably switch to Zod :))
I used yup too until mid 2022 and found switching to be a bit uncomfortable at first, but then I just got used to it.
Excellent!
thank you
🔥🔥
thank you!
my pleasure, I hope you will tag along for the next ones 😌
Thank you sensei
😅 well… that’s the first time someone called me that. I’m happy it was helpful 🙏
@@vlad.nicula thank your video I could make my form that has 4 children components, one of them is a dynamic array of objects with file upload, and another one is a signature canvas.
@@Edwinil oh nice, I never used a signature canvas as an input, is there a react component for it?
@@vlad.nicula yes react-signature-canvas
Great video! I love your considerations for separation of concerns.
For the Login button why not give it type="button" instead of preventDefault (I mean for the general example before you wrapped it in Next's Link). Also if we were not using Next (Link) it may be better for accessibility to have an that is only visually styled like a button.
And I would like to see what is the best way to pass props when navigating to a new page after the form submit - for example if the backend returns a response with a message "Sign up successful", and we redirect to /, how can we pass this message to be displayed on /?
good points about the button type and the link. And yes, a next link would work better. I used the router push because I already had a router used on the page.
Regarding the navigation and data passing, I don’t have a preferred approach. Usually a get param is enough, so a successful login redirects to home?login=success or something like that, or of we want to be fancier the get param is a key that is used to ask the server again for that message. Another approach I saw was to keep a session storage value, that way you only see the message once.
Thanks for the feedback and the question. I think I’ll add the button trick in my class next time I teach this 👍
Awsome
Thanks! I hope you'll check the next ones out as well when they come out :D
Awesome tutorial.
Just a suggestion the video looks streched to me. Please look into that .
Thanks for pointing it out. I’m 100% new to vídeo editing. I hope you’ll tag along for the next out and provide more feedback ☺️
@@vlad.nicula yea sure. Into 20 mins of watching your tutorial and it's very good. Easy to understand, simple, clear and concise.
Awesome tutorial buddy.
🚀🚀🚀
someone is a night owl 🦉😄
I usually use react-hook-form with yup for validation. Is zod better than yup ?
zod seems to be more adopted by the typescript community and is more likely to grow in the next few years. In 2022 I used both and saw no difference in terms of capabilities between the two 👍
Zod is very amazing..
yep, it brings typescript in the runtime 👌
Awesome tutorial, really quality content, I have a question btw, my inputs shrink after the error message dissapears (maybe it's that their sizes are kinda different), any idea you could give me to solve this?
Not sure what you mean by shrink but I did encounter situations where the error message was adding some margin when the message existed, yet when there was no error there was no element to add that space either, so the inputs would move on the screen vertically. Leaving an empty placeholder or adding a css margin on the input when it does not have errors solved this for me
@@vlad.nicula Hey, thanks, by shrink i mean that all the input sizes reduces when the error message dissapears, so i was wondering if there's a way to keep the size consistent
@@samuelpalacios9661 oh yeah that’s CSS. Maybe set a flex stretch or fixed width to the inputs
@@vlad.nicula Ty!!!
This is excellent thank you very much! I just don't understand what you're doing in the TextField spread
{...(props.inputProps ?? {})}
I'm spreading an object, and if it doesn't exist, I avoid an error by providing and empty object to the spread operation 👍
#HelpingTheAlgo
I wonder if it is possible to re-render an SSC from a CSC. For example, I got my Server Component and it's a list of products and one button to add new products which fire a Form (Client component) after filling it, the submit could update the Server List component?
hm… I’m afraid I can’t help with server components as I did not have a chance to use them 😔
Can you please explain when we should be using useCallback, useMemo, and useRef hooks?
I’ll try to be more mindful when using those hooks in the next videos and point out when we need to use them and why. Thanks for asking 👍
Is there a particular situation in the video that you want to ask about or is your question in general?
You could have saved all the prop declarations with DetailedHTMLProps generic. :)
Making a mental note to Google and read about that 😅
What is the VSCode color theme?
apparently it is called Codesandbox Black 2021. I think it is this one: marketplace.visualstudio.com/items?itemName=siddharthkp.codesandbox-black
And for the font I use Fira Code: fonts.google.com/specimen/Fira+Code?preview.text=%3D%3E%20()%20!%3D%3D%20!%3D%20%3C%3D%20%3E%3D%20%7B%7D&preview.text_type=custom
😀
Create content!
BTW, to prevent button from submitting the form just add type="button"
all that complxity and it can't do something simple like only hiding a button until the input has some text in it
yeah, forms are complicated 😞
What makes you think it can’t do this? But anyway it is bad UX to hide button before the validation passes
So hard to just sit here and watch him struggle around 1:10:00 and not to talk to the screen telling him to check the spelling!
The author learned English from Indians)))))
ahm oke, that’s a new one
@@vlad.nicula It's just a joke ^_^
Rude
🔥🔥🔥