React Hook Form - Complete Tutorial (with Zod)

Рет қаралды 75,117

4 ай бұрын

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.

Пікірлер: 203

@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 KZfaq.

@Pareshbpatel 15 сағат бұрын

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}

@sckoobs 4 ай бұрын

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 3 ай бұрын

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 4 ай бұрын

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 .

@EnesKab 2 ай бұрын

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 2 ай бұрын

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 3 ай бұрын

Simplicity at its peak 🙌, thanks man

@Loretaaaaa 4 ай бұрын

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

@adamyasharma_0135 Ай бұрын

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

@mzamotembe5200 4 ай бұрын

Man, your content is absolutely amazing 👏

@akashddeepchitransh4537 Ай бұрын

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

@user-yu1ib7yh7o 2 ай бұрын

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

@nemeziz_prime 4 ай бұрын

This is amazingly easy to understand. Great video 💪🏻

@tunde6159 9 күн бұрын

Glad I found this channel. Great tutorial.

@nmdpa3 Ай бұрын

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

@aiwithhamzanaeem 2 ай бұрын

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

@sviatoslav8776 3 ай бұрын

Thanks for such easy and comprehensive explanation.

@MrTaekbeen 2 ай бұрын

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

@gianlucasoremcasualzate6421 4 ай бұрын

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

@carloautor 3 ай бұрын

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

@adarshmodanwal8436 4 ай бұрын

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

@agilustre 23 күн бұрын

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

@usamatahir6413 4 ай бұрын

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

@luyvannda 2 ай бұрын

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

@emptytank604 2 ай бұрын

This is an amazing tutorial. Instantly subscribed.

@user-dr4xd9bx4b Ай бұрын

Thank you so much. Great explaination.

@ptolemyhenson6838 4 ай бұрын

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 3 ай бұрын

Love you brother. Awesome video with awesome explanation ❤

@joaomarcelofurtadoromero8277 4 ай бұрын

Cosden is the king of juniors !! what a guy

@ToiaGeddes Ай бұрын

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

@noahnymous9919 3 ай бұрын

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

@Earth_Elegance_ Ай бұрын

this is very useful and the explanation is great!

@MohammadBarghamadii 13 күн бұрын

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

@SavanThongvanh 2 ай бұрын

very straight forward presentation of useful info. nice work

@guitarcrax127 4 ай бұрын

Highest quality react content on KZfaq!

@removed107 3 ай бұрын

Amazing tutorial, thanks for sharing with us.

@bengardiner5880 28 күн бұрын

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!

@oceanvvl 4 ай бұрын

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;

@ryostyles9904 4 ай бұрын

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

@shuaibuusman8784 4 ай бұрын

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 20 күн бұрын

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

@DevinJohw 3 күн бұрын

Great guide, Thanks!

@Ksson96 3 ай бұрын

Really good video, quick and easy!

@funterban6536 2 күн бұрын

nice method to elaborate everything

@K.Huynh. 4 ай бұрын

thanks for sharing! I love your tutorial!

@geforcesong 3 ай бұрын

Fantastic video Cosden.

@master-ik9ro 21 күн бұрын

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

@anuragkumarsingh2757 4 ай бұрын

Thanks for making such useful videos really greaful ❤

@imamdroubi6537 4 ай бұрын

Very useful video, thank you so much.

@alexanderrossi7490 4 ай бұрын

Another great tutorial thanks bro

@romaghorjomeladze439 2 ай бұрын

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

@siddhartha-555 4 ай бұрын

Great explanation! Thanks a lot❤

@basavarajeshkoni9739 4 ай бұрын

Make video on writing test cases for jest coverage report

@nomansyt 3 ай бұрын

Male video?

@basavarajeshkoni9739 3 ай бұрын

@@nomansyt edited

@omarharroud7990 10 күн бұрын

Thank you. A new subscriber

@chadkopelowitz5642 4 ай бұрын

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

@cosdensolutions 4 ай бұрын

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

@chadkopelowitz5642 4 ай бұрын

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

@leonardmbibi8013 11 сағат бұрын

@@cosdensolutions To be very honest with you I don't like the shorts; but I like your video tutorials

@user-jv3ll8lw1j 3 ай бұрын

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!

@generalknowledgeandhistory 2 ай бұрын

Very informative great work

@emrans5604 3 ай бұрын

Fantastic video on React Hook Form

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

@Manoj_Gowda89 3 ай бұрын

U made my work simple future master peace react instructor

@amitgodosi995 4 ай бұрын

U are the best, fun to learn from you

@user-ce9yr3my4g 2 ай бұрын

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

@Alex.Shalda 3 ай бұрын

awesome tutorial!

@user-gm3lg8gp3m 3 ай бұрын

this is so useful!! thanks!

@MrAlao675 4 ай бұрын

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

@cosdensolutions 4 ай бұрын

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

@gustavoh5143 4 ай бұрын

but you have to validate on both sides

@gouravchouhan1790 4 ай бұрын

The Messiah of react developers ❤️

@Muhammad-yz8yf 4 ай бұрын

Thank you very much sir

@faizanahmed9304 4 ай бұрын

Thank you!

@roebienarnaiz 3 ай бұрын

Great video!

@JessperTV 2 ай бұрын

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

@nsynsynsy 4 ай бұрын

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?

@ardianhotii 4 ай бұрын

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

@jamesli395 Ай бұрын

great intro thx !!

@ruangiklim9586 4 ай бұрын

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

@i_am_pasindu 4 ай бұрын

Damn, you read my mind!! 🔥

@ranajunaid4035 Ай бұрын

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

@furqanQadri7 3 ай бұрын

easy to follow!

@deepakjha4138 3 ай бұрын

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

@reinaldoteixeira9653 4 ай бұрын

Great classe! Thanks a lot

@dheerajsharma355 2 ай бұрын

you are the best !!

@tamaniphiri 4 ай бұрын

Great job 👏 👍

@quanmuito6156 4 ай бұрын

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 4 ай бұрын

I will eventually make React testing videos on most things

@quanmuito6156 4 ай бұрын

Keep up the good work man 💪

@d3vwannabe 2 ай бұрын

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 2 ай бұрын

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 4 ай бұрын

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

@cosdensolutions 4 ай бұрын

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

@gokulsuresh6996 22 күн бұрын

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

@ramimekni9543 2 ай бұрын

great job

@villanuevacyrelb.9426 3 ай бұрын

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

@Movoid12 4 ай бұрын

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 4 ай бұрын

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 4 ай бұрын

Thank you!

@cosdensolutions 4 ай бұрын

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 4 ай бұрын

@@cosdensolutions thank you again! It works 😎

@tahirdm1170 Ай бұрын

Awesome!!!

@psyferinc.3573 3 ай бұрын

thanks man

@ChungKang 3 ай бұрын

Thanks!

@peeratchaikleebbua7723 4 ай бұрын

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 4 ай бұрын

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

@DevinJohw 3 күн бұрын

The way you use Tailwindcss is cool! How did you do that?

@INetreba 3 ай бұрын

good job!

@raphael.portela 4 ай бұрын

what about selects, date pickers, other more complex fields, should i use control or still register? and its ok to mix both inside a form from react hook form?

@cosdensolutions 4 ай бұрын

I would create custom components for all of those and use control. Yeah you can mix but ideally have one common pattern for all

@raphael.portela 4 ай бұрын

@@cosdensolutions thank you!

@ahmedsufiyan8999 4 ай бұрын

good job from ethiopia

@devkumar9889 4 ай бұрын

Thanks

@ayukalvieri3154 2 ай бұрын

I tried to push the user to another route after validation in the onsubmit function using useRouter, instead it returns an error: useRouter has not been... Can anyone help

@shakapaker 4 ай бұрын

I have a problem with this, when I have a field that is a date, then as the default input value, I need a string, and the value itself will be a date and I have to add ts-ignore inside default values.

@cosdensolutions 4 ай бұрын

You can either work with an input that accepts dates (custom date input) or type everything to strings (because they are strings) and convert them to dates when you need to (in your submit function for example)