React Hook Form - Complete Tutorial (with Zod)

Join The Discord! → discord.cosdensolutions.io
Source Code → github.com/cosdensolutions/co...
VSCode Theme | Font → Material Theme Darker | Menlo, Monaco "monospace"
In this video we will learn about React Hook Form and Zod. React Hook Form is a form library in React that makes it really easy to create complex forms that scale really well. We are going to learn how to create a form with React Hook Form, how to implement our own validation and submit our data, and finally how to use Zod for validation to make it easy for us to create strong forms. Get ready, you are going to learn a lot in this React Hook Form tutorial for React.

[@oluwasegunadeniyi7673]

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

[@sckoobs]

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!

[@eshw23]

Freakingbrilliant man! This is what I needed for my app. 30 minutes of concise explanations of everything important, not to long, not to short.

[@shah6138]

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 .

[@Loretaaaaa]

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

[@EnesKab]

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.

[@franklinmayoyo]

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.

[@senseiKakashi07]

Simplicity at its peak 🙌, thanks man

[@mzamotembe5200]

Man, your content is absolutely amazing 👏

[@nemeziz_prime]

This is amazingly easy to understand. Great video 💪🏻

[@nmdpa3]

Perfect overview and clearly demonstrated! Thanks for the education and for keeping it easy to follow.

[@carloautor]

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

[@MrTaekbeen]

Superb! Thanks for the video! You make it so easy to understand react-hook-form and zod in less than 30min.

[@adamyasharma_0135]

the concept clarity I recieved about why React hook form is even needed ,thank you so much

[@user-yu1ib7yh7o]

Watched this video without forwarding it but felt like it's ended in 5mins even though its 28min video, Crisp and Clear

[@akashddeepchitransh4537]

Can't appreciate more! You always value your viewers' time. 👍👍

[@agilustre]

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. :)

[@aiwithhamzanaeem]

Thanks dear. Finally I understand How Zod work with react hook form. Stay blessed.

[@luyvannda]

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. :)

[@usamatahir6413]

Fantastic video. You explained everything in detail. Thank you so much

[@tunde6159]

Glad I found this channel. Great tutorial.

[@chadkopelowitz5642]

I love your content! You provide great tips! I definitely prefer your videos over your shorts

[@cosdensolutions]

would you mind telling me why? I'm curious :D

[@chadkopelowitz5642]

@@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 🙂

[@adarshmodanwal8436]

Very helpful especially using zod with react-hook-form. Great work🍷

[@sviatoslav8776]

Thanks for such easy and comprehensive explanation.

[@bengardiner5880]

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!

[@gianlucasoremcasualzate6421]

This is just so great, thank you for explaining this so easily

[@noahnymous9919]

Amazingly well explained. Thanks Cosden, one more subscriber for you!

[@shuaibuusman8784]

Good Job Cosden, I just happen to be working on a very important project and this is just what i needed for my forms

[@Kco86]

good stuff! thank for your time sharing this. here a new follower from Costa Rica 🏖

[@emptytank604]

This is an amazing tutorial. Instantly subscribed.

[@SavanThongvanh]

very straight forward presentation of useful info. nice work

[@ptolemyhenson6838]

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.

[@mohammedsufiyan5164]

Love you brother. Awesome video with awesome explanation ❤

[@ToiaGeddes]

i just wanted to say thank you for this great video, it even has typescript! thanks you so much

[@Ksson96]

Really good video, quick and easy!

[@geforcesong]

Fantastic video Cosden.

[@joaomarcelofurtadoromero8277]

Cosden is the king of juniors !! what a guy

[@Earth_Elegance_]

this is very useful and the explanation is great!

[@guitarcrax127]

Highest quality react content on KZbin!

[@removed107]

Amazing tutorial, thanks for sharing with us.

[@oceanvvl]

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;

[@romaghorjomeladze439]

You are creating great content, the best for react🙌🙌 I was expecting to see how to use controls as well

[@K.Huynh.]

thanks for sharing! I love your tutorial!

[@alexanderrossi7490]

Another great tutorial thanks bro

[@ryostyles9904]

This is awesome, I don't have to create those validation features from scratch now

[@MohammadBarghamadii]

Thank you so much, great information and great video with great teacher

[@user-dr4xd9bx4b]

Thank you so much. Great explaination.

[@user-jv3ll8lw1j]

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!

[@siddhartha-555]

Great explanation! Thanks a lot❤

[@anuragkumarsingh2757]

Thanks for making such useful videos really greaful ❤

[@amitgodosi995]

U are the best, fun to learn from you

[@generalknowledgeandhistory]

Very informative great work

[@emrans5604]

Fantastic video on React Hook Form

[@DevinJohw]

Great guide, Thanks!

[@Alex.Shalda]

awesome tutorial!

[@imamdroubi6537]

Very useful video, thank you so much.

[@user-gm3lg8gp3m]

this is so useful!! thanks!

[@roebienarnaiz]

Great video!

[@omarharroud7990]

Thank you. A new subscriber

[@govindkarthikeyan]

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.

[@gouravchouhan1790]

The Messiah of react developers ❤️

[@user-ce9yr3my4g]

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

[@i_am_pasindu]

Damn, you read my mind!! 🔥

[@tamaniphiri]

Great job 👏 👍

[@master-ik9ro]

unrelated but when he said "this form works" at 1:59 with the kubrick stare on his face, i felt it in my soul

[@Manoj_Gowda89]

U made my work simple future master peace react instructor

[@faizanahmed9304]

Thank you!

[@ruangiklim9586]

Cool! Please do a video on useWatch, watch, and field array next. Thank you!

[@MrAlao675]

Nice one. I actually hated it until you got to zod. I like to validate my forms on the server though.

[@cosdensolutions]

client side validation has its uses, it's usually better UX to provide instant feedback as the user types

[@gustavoh5143]

but you have to validate on both sides

[@dheerajsharma355]

you are the best !!

[@jamesli395]

great intro thx !!

[@furqanQadri7]

easy to follow!

[@nsynsynsy]

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?

[@ramimekni9543]

great job

[@reinaldoteixeira9653]

Great classe! Thanks a lot

[@tahirdm1170]

Awesome!!!

[@Muhammad-yz8yf]

Thank you very much sir

[@JessperTV]

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

[@ardianhotii]

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

[@INetreba]

good job!

[@psyferinc.3573]

thanks man

[@basavarajeshkoni9739]

Make video on writing test cases for jest coverage report

[@nomansyt]

Male video?

[@basavarajeshkoni9739]

@@nomansyt edited

[@ChungKang]

Thanks!

[@ahmedsufiyan8999]

good job from ethiopia

[@samahgad241]

Awsome😍

[@emmanuelenemaku1232]

You are the best

[@villanuevacyrelb.9426]

great tutorial btw can i ask the name of the font that you are using?

[@user-mx1ek4sl2m]

My guy, come to Greece. Nice video too.

[@deepakjha4138]

hi, which vs code plugin you are using for copilot(code suggestion you are getting which writing the code).

[@ranajunaid4035]

can you please tell me what extension that you use, when you start writing on 7:47 it showed suggestions in code

[@quanmuito6156]

Thanks for the video. 1 suggestion that next time you do a code tutorial video, can you also show how to write test for them? That would be so much better

[@cosdensolutions]

I will eventually make React testing videos on most things

[@quanmuito6156]

Keep up the good work man 💪

[@SiddharthSehgalSRS]

Great way

[@devkumar9889]

Thanks

[@peeratchaikleebbua7723]

Nice video explaining, I am still wondering whether I should use formik or react hook form. Even though I already have worked with two of them in my job. But when it comes to personal project, I still do not know how to decide.

[@cosdensolutions]

I'd recommend RHF, it's a bit more performant

[@ibrahimkouma6751]

We would like some content on testing with testing library a super important concept in software development

[@Movoid12]

Great video 🎉thank you so much! Can you please make a video how to edit and customize the error messages of the zod validation with the react hook form resolver? Or shortly how to do that? I would really love to support you with some coffee ☕️ if you provide us a link ✌🏼 all love and support from berlin

[@Movoid12]

Is that the right way? const schema = z.object({ name: z.string().nonempty({ message: 'Name is required' }), age: z.number().min(10, { message: 'You must be at least 10 years old' }), });

[@faizanahmed9304]

Thank you!

[@cosdensolutions]

for a lot of them you can pass an object with message as a property like you did. For the required validation, I'd just do `.min(1, { message: "Required" })`

[@Movoid12]

@@cosdensolutions thank you again! It works 😎

[@gokulsuresh6996]

i am new to this field may i know how you got suggetion every time you start typing and your video was so cool

[@d3vwannabe]

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.

[@cosdensolutions]

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!

[@neelnarwadkar5921]

Great video! What about onChange validations and if i wanted to manipulate some data when the value of a field changes

[@cosdensolutions]

so RHF automatically validates fields onChange for you, as you can see my errors appear/disappear as I type. If you want to do more than that, you can actually access `onChange` and `onBlur` properties of RHF for a specific field and implement your own logic there. Check out the RHF docs for that

[@rubenlech7256]

Nide tutorial!