Hope you enjoyed the video! I also have a really cool and unique course that will teach you way more than this video. You'll learn how to build an actual complex project with React. It's called "Project React" and you can find it at cosden.solutions/project-react. Also, I have a free weekly newsletter called "Import React" with tutorials, news, and cool stuff about React! You can sign up at cosden.solutions/newsletter?s=ytc
I like how you always state the problem before introducing the solution. I've probably never said this on any channel, but you're the best teacher I've seen so far on TH-cam.
Hands-off, that's the best tutorial on react hook forms and zod. I was struggling with other tutorials before I have found yours. Step by step, explaining all the details, and make it click for us the viewers. Please keep going. I have already subscribed.
00:00 Introduction 00:48 Basic form walkthrough 02:10 Why use React Hook Form (RHF)? 04:26 Implementing the form with RHF 05:21 Setting field types 06:05 Connecting the form to RHF 07:25 Submitting the form 10:01 Validating fields using RHF 12:51 Setting validation messages 17:12 Handling asynchronous submissions 19:23 Handling errors 22:19 Setting default field values 23:21 Validating fields using Zod 27:53 Outro
I can't thank you enough. Inwas working on a form and wanted to learn zod. Boom, I found you have both react-hook-form and zod😂. Your channel has helped me polish on my development. You structure your tutorials in a way even my grandma can understand. I like the step by step guide, that way i know why this or that happened.
Fantastic video Cosden. Good depth of information covered and I particularly like how you explain how you'd take the example beyond tutorial-ware into something you'd need for a production application - stuff like interacting async with a real backend and using Zod over your own validation. I am looking forward to that Zod video you mentioned!
This has to be the best and most complete tutorial on implementing forms in React, using React-Hook-Form, Zod, and Typescript! - So clearly presented. Thank you very muck, Darius {2024-05-28}, {2024-06-02}, {2024-07-03/24/29}
This has been the best tutorial for React Hook Form and Zod in 2024. Thank you for explaining the problem and the solution well. I'm really excited to try this in our project! This is my first time on your channel and I will make sure to check out your other videos. :)
Yeh have to agree with the comments below. Your style of explanation, the clarity and pace is very good to watch. Glad i found this channel. Keep up the good work!
I like your technical video bro..! That's make seance to me easy understand technical things from surface level to underhood level how technical things work.! I really appreciate your video.
As someone who has watched most of the rhf and zod tutorials on youtube and has found them difficult- this was really good - I am excited to hear about your zod tutorial. A bit of feedback is to install all the dependencies at the start of your tutorial .
@@cosdensolutions you go into greater detail in your videos and you point out caveats and potential errors better. Don't get me wrong, your shorts are still great 🙂
lovely session . thank you. for all the young engineers out there, i wud still recommend you to try to implement your own form handling without any tools/libs. Learn from your mistakes and rebuild it with your own version of improvements. Build it again and again until you are happy with the final results. THEN, start using tools such as react foom and zod. You will be amazed how much you have accomplished and in some cases, you may even realize that the tools are doing exactly what you have built. People may say to you that you are reinventing the wheels. You are not. You are learning and setting up solid fundamental skills for your career which is what nowadays young people are lacking.
Thank you Cosden for a clear and concise video on React Hook Form. I need it to build a contact form for my next.js portfolio. Your video explains better than the React Hook Form documentation. Like other who commented here, I am also waiting for your video on Zod validation. :)
Big thanks for the fantastic video! 🚀 Your clear explanations and practical examples made complex concepts feel so much more approachable. Looking forward to diving deeper into these topics with your guidance. Keep up the great work! 🥰
I've been writing hooks that individually manage fields and then respond back to the parent through a callback that they specify. It looks better than the example, but the amount of different options the components have is insane. Looking forward to this alternative solution.
Very very very very very informative and clear explanations. This is what I exactly looking for. I am looking forward for the Zod tutorial also. Many thanks
Hello sir, could you tell us what is the name of extension that suggest you the code in background? For example, at 7:48, when you start writing SubmitHandler, I see that the structure is already written "in the shadow" :D
Amazing explanation! Very simply and clearly! I'm totally be subscribed for your channel! Which will be the next topic? I think, it's will be very helpful if you're making a video for professional setup about husky/eslint/prettier and why not some basic CI/CD? Thank you in advance!
Thank you for this very nice video; I would definitely use it when I have a big form in React; just wanted to mention that Angular have this kind of form handling for years;
It looks simple for straight use cases like this but getting complicated when I have a huge form with form fields spread across multiple different components. It will be great if you can make a content covering those edge cases, Thanks.
Hi, i've seen a lot of coding content from a lot of other youtubers but you bro you're just brilliant. Would be great if you provide us with initial code, not just final version
Great video! Could you also go over how react-hook-form saves # of rerenders? I find this fascinating and don't quiet understand how. I made some general purpose hooks and they cause a lot of unnecessary rerenders due to some extra states used for niche cases. I would like to prevent those rerenders if a component using the hook is not using those states. It seems react-hook-form does exactly that, where if you don't watch the error, it will not rerender when user types.
Great video! Thanks for explaining the concepts so clearly! What if the validation of one field depends on the value of another? In the video's example, how can you achieve a validation function that prevents the user from submitting a password that is contained in the email?
Great video! I wonder why does it say string must contain... instead of saying the field's name like in your case password field , I'm also so excited for that zod tutorial and please cover some more advanced features not just basics and use it with react hook form
Hope you enjoyed the video! I also have a really cool and unique course that will teach you way more than this video. You'll learn how to build an actual complex project with React. It's called "Project React" and you can find it at cosden.solutions/project-react. Also, I have a free weekly newsletter called "Import React" with tutorials, news, and cool stuff about React! You can sign up at cosden.solutions/newsletter?s=ytc
I like how you always state the problem before introducing the solution. I've probably never said this on any channel, but you're the best teacher I've seen so far on TH-cam.
What a superb way to explain!
@@gauthamvijayan yes ! he said it at starting why we even need it before starting it ...
Hands-off, that's the best tutorial on react hook forms and zod. I was struggling with other tutorials before I have found yours. Step by step, explaining all the details, and make it click for us the viewers. Please keep going. I have already subscribed.
00:00 Introduction
00:48 Basic form walkthrough
02:10 Why use React Hook Form (RHF)?
04:26 Implementing the form with RHF
05:21 Setting field types
06:05 Connecting the form to RHF
07:25 Submitting the form
10:01 Validating fields using RHF
12:51 Setting validation messages
17:12 Handling asynchronous submissions
19:23 Handling errors
22:19 Setting default field values
23:21 Validating fields using Zod
27:53 Outro
I can't thank you enough. Inwas working on a form and wanted to learn zod. Boom, I found you have both react-hook-form and zod😂. Your channel has helped me polish on my development. You structure your tutorials in a way even my grandma can understand. I like the step by step guide, that way i know why this or that happened.
I have ADHD, still I managed to sit thru entire tutorial without any stop. Really solid delivery thanks a ton!
U don't have adhd then
Freakingbrilliant man! This is what I needed for my app. 30 minutes of concise explanations of everything important, not to long, not to short.
After 6 years of struggling with forms, we finally have something useful! Thanks for the in-depth tutorial!
One of the best tutorials I've ever watched. To the point and clear. Thank you! Great job!
I have seen many of your tutorials this is by far the best. chaw chaw
Fantastic video Cosden. Good depth of information covered and I particularly like how you explain how you'd take the example beyond tutorial-ware into something you'd need for a production application - stuff like interacting async with a real backend and using Zod over your own validation. I am looking forward to that Zod video you mentioned!
Thankyou for finally making me understand react-hook-forms. I was afraid i might not understand it but now i feel so confident. Thankyousomuch!
from defining the problem to providing the solution with react-hook form and optimizing it with zod, you did a great job explaining it
Watched this video without forwarding it but felt like it's ended in 5mins even though its 28min video, Crisp and Clear
the concept clarity I recieved about why React hook form is even needed ,thank you so much
This has to be the best and most complete tutorial on implementing forms in React, using React-Hook-Form, Zod, and Typescript! - So clearly presented. Thank you very muck, Darius
{2024-05-28}, {2024-06-02}, {2024-07-03/24/29}
Can't appreciate more! You always value your viewers' time. 👍👍
This has been the best tutorial for React Hook Form and Zod in 2024. Thank you for explaining the problem and the solution well. I'm really excited to try this in our project! This is my first time on your channel and I will make sure to check out your other videos. :)
Thank You so much! I speeded 3 days trying to figure out how to do ir properly. This explanation is great!
Yeh have to agree with the comments below. Your style of explanation, the clarity and pace is very good to watch. Glad i found this channel.
Keep up the good work!
I like your technical video bro..!
That's make seance to me easy understand technical things from surface level to underhood level how technical things work.!
I really appreciate your video.
As someone who has watched most of the rhf and zod tutorials on youtube and has found them difficult- this was really good - I am excited to hear about your zod tutorial. A bit of feedback is to install all the dependencies at the start of your tutorial .
this is probably the best rhf lesson i have ever seen ! Thank you so much!
I love your content! You provide great tips! I definitely prefer your videos over your shorts
would you mind telling me why? I'm curious :D
@@cosdensolutions you go into greater detail in your videos and you point out caveats and potential errors better. Don't get me wrong, your shorts are still great 🙂
@@cosdensolutions To be very honest with you I don't like the shorts; but I like your video tutorials
lovely session . thank you. for all the young engineers out there, i wud still recommend you to try to implement your own form handling without any tools/libs. Learn from your mistakes and rebuild it with your own version of improvements. Build it again and again until you are happy with the final results. THEN, start using tools such as react foom and zod. You will be amazed how much you have accomplished and in some cases, you may even realize that the tools are doing exactly what you have built. People may say to you that you are reinventing the wheels. You are not. You are learning and setting up solid fundamental skills for your career which is what nowadays young people are lacking.
Simplicity at its peak 🙌, thanks man
Superb! Thanks for the video! You make it so easy to understand react-hook-form and zod in less than 30min.
man, you are the best. you describe complicated things in such a simple way.. good job!!
Amazing video, I have been using react-hook-from front for the last few months but I have learnt a lot from this again.
Thank you so much.
Thank you Cosden for a clear and concise video on React Hook Form. I need it to build a contact form for my next.js portfolio. Your video explains better than the React Hook Form documentation. Like other who commented here, I am also waiting for your video on Zod validation. :)
Highest quality react content on TH-cam!
Thanks dear. Finally I understand How Zod work with react hook form. Stay blessed.
Perfect overview and clearly demonstrated! Thanks for the education and for keeping it easy to follow.
Thanks cosden, for making react hook form so much easy for me.
Big thanks for the fantastic video! 🚀 Your clear explanations and practical examples made complex concepts feel so much more approachable. Looking forward to diving deeper into these topics with your guidance. Keep up the great work! 🥰
I've been writing hooks that individually manage fields and then respond back to the parent through a callback that they specify. It looks better than the example, but the amount of different options the components have is insane. Looking forward to this alternative solution.
Subscribed. What a easy way to explain! Loved the video. Keep the great vids coming!
What a video, uncovers a lot of hidden things. Thanks man!
Cosden is the king of juniors !! what a guy
Thank you! Very clear explanation and guide step-by-step from simple form to more complicated. 💪🙏💗
Great tutorial so concise and information dense yet so easy to follow. keep up the good work.
best tutorial for react hooks. thanks
Very very very very very informative and clear explanations. This is what I exactly looking for. I am looking forward for the Zod tutorial also. Many thanks
Good Job Cosden, I just happen to be working on a very important project and this is just what i needed for my forms
Hello sir, could you tell us what is the name of extension that suggest you the code in background? For example, at 7:48, when you start writing SubmitHandler, I see that the structure is already written "in the shadow" :D
its github copilot extension
Man, your content is absolutely amazing 👏
I'm learning a lot from your videos man, Thanks a lot for you work.👍👍
Thanks for the simple explanation.😇
Great content man! So precise and clearly stated! Hats off!
Fantastic video ! Easy to follow and useful . Thanks
Fabulous. Very simple and clear. Thank you!
Glad I found this channel. Great tutorial.
Fully digested content. Love it 😍😍
very straight forward presentation of useful info. nice work
WOW!! Just fantastic. Excellent explanation. Thank you.
Amazing tutorial, enjoyed every second of it.
i just wanted to say thank you for this great video, it even has typescript! thanks you so much
This is an amazing tutorial. Instantly subscribed.
unrelated but when he said "this form works" at 1:59 with the kubrick stare on his face, i felt it in my soul
You are creating great content, the best for react🙌🙌 I was expecting to see how to use controls as well
Nice one.
I actually hated it until you got to zod.
I like to validate my forms on the server though.
client side validation has its uses, it's usually better UX to provide instant feedback as the user types
but you have to validate on both sides
good stuff! thank for your time sharing this.
here a new follower from Costa Rica 🏖
Amazing explanation! Very simply and clearly! I'm totally be subscribed for your channel! Which will be the next topic? I think, it's will be very helpful if you're making a video for professional setup about husky/eslint/prettier and why not some basic CI/CD? Thank you in advance!
Amazingly well explained. Thanks Cosden, one more subscriber for you!
Thank you for this very nice video;
I would definitely use it when I have a big form in React;
just wanted to mention that Angular have this kind of form handling for years;
Very helpful especially using zod with react-hook-form.
Great work🍷
It looks simple for straight use cases like this but getting complicated when I have a huge form with form fields spread across multiple different components. It will be great if you can make a content covering those edge cases, Thanks.
Hi, i've seen a lot of coding content from a lot of other youtubers but you bro you're just brilliant. Would be great if you provide us with initial code, not just final version
Thanks for such easy and comprehensive explanation.
Fantastic video Cosden.
Fantastic video. You explained everything in detail. Thank you so much
Love you brother. Awesome video with awesome explanation ❤
wow... you made it so easy to understand .. keep it up ..
this is very useful and the explanation is great!
This is awesome, I don't have to create those validation features from scratch now
This is amazingly easy to understand. Great video 💪🏻
The Messiah of react developers ❤️
Really good video, quick and easy!
This is just so great, thank you for explaining this so easily
you are a very good teacher! can you share the cool extenstions that were used here? those who automate and fillin the code for you
Great video! Could you also go over how react-hook-form saves # of rerenders? I find this fascinating and don't quiet understand how. I made some general purpose hooks and they cause a lot of unnecessary rerenders due to some extra states used for niche cases. I would like to prevent those rerenders if a component using the hook is not using those states.
It seems react-hook-form does exactly that, where if you don't watch the error, it will not rerender when user types.
RHF uses uncontrolled components behind the scenes, meaning that state doesn't update as it updates, so that's where the performance is coming from!
Great video! Thanks for explaining the concepts so clearly! What if the validation of one field depends on the value of another? In the video's example, how can you achieve a validation function that prevents the user from submitting a password that is contained in the email?
Really a great video!
best teacher
Very informative great work
well explained tutorial . please keep putting sush great tutorials
best video ever
Which extension do you use for your typescript type autocompletion or type intellisence?
Amazing tutorial, thanks for sharing with us.
Fantastic video on React Hook Form
I love your content!
Another great tutorial thanks bro
Great video! I wonder why does it say string must contain... instead of saying the field's name like in your case password field , I'm also so excited for that zod tutorial and please cover some more advanced features not just basics and use it with react hook form
Fantastic explanation
Good job , same thing using Formik and Yup ! :)
How to make an input required with Zod ? when you removed the React Hook Form there was no more required validation rule
Great video!
Great video. 🎉
Make video on writing test cases for jest coverage report
Male video?
@@nomansyt edited
Thank you so much, great information and great video with great teacher