React Hook Form (+ Zod) - Complete Tutorial

[@ByteGrad]

My Professional React & Next.js course is OUT NOW now! Find it here: bytegrad.com/courses/professional-react-nextjs -- this is the #1 resource to master the latest React & Next.js, my absolute best work.

[@ilukanets]

I'm from Ukraine and just visited your course page. Want to thank you for supporting Ukraine by providing special coupon, I believe there are people who need it. Thank you!! And your videos are great, especially this one. Great job!

[@FGA-47]

This tutorial is by far the most exceptional one I've come across. The meticulous breakdown into step-by-step segments and the incredible effort you invested in creating it are truly remarkable. Thank you immensely for your dedication. Please continue the great work!

[@thegoncaloalves]

It was definitely not easy to find a good tutorial for nextjs, react-hook-form and zod. This is a great resource!

[@TheLondekZdroj]

Man! you are a lifesaver. There's nobody else on YT who can compress so much useful knowledge in an easily digestible format. Well done!.

[@editin232]

You going trough the traditional way of creating a form is so useful to me as a new developer.

[@tarek-mo02]

I love the way you explain the Why's we moved from one approach to another in ur videos... For example here with why from traditional controlled component to react hook form to react hook form with zod...u can't imagine how valuable that is so we don't just memorize patterns without knowing why we do things a certain way... Keep up the good work man

[@Fishamble]

I think I am finally at the stage where I can appreciate the videos you make. They had gone over my head in the past, but now I find them excellent. Thanks and keep up the good work.

[@Julia_K7]

This is an amazing tutorial! I tried watching a few different ones about react-hook-form and zod before this one and none of them could explain the topic as clearly as you did!

[@VLADICA94KG]

I can't emphasize enough how invaluable your videos are and how much I learned from them. Thanks a lot and keep up the great work!

[@musiuralamopu9589]

I hardly comment on videos. But this channel is a gem store surely! Mentioning actual issue, resolving with robust and sophisticated solution and also no unnecessary single words! Very very grateful to you! 🖤

[@AlexanderBelov-y8o]

Waoh, single handedly teaching React form validation in 30 minutes with clear explaination.

[@SaurabhThapliyal-pu3vs]

I must say, this KZbin tutorial on React Hook Form and Zod validation is hands down the best beginner-friendly resource I've come across! The explanations were crystal clear, and I now have a solid understanding of how to integrate these tools into my projects. Huge thanks to you Sir!

[@abdullah_siddiquii]

The way of your teaching is superb. Firstly see whats the problem is by brute force Solution then think why to shift and how to shift toward clean and efficient solution.

[@songhyeonjun2803]

this course is really well organized and should be popular more!

[@gedeonyala6836]

if it was possible to give a thousands of likes i would do it, thanks a lot for this amazing knowledge big bro

[@Milo_1010_]

I just discovered your channel and i have to say it is the most clean and comprehensive tutorial i had on React Hook Form. Thank you a lot for your dedication, i just subscribed !🎉

[@VincentFulco]

Outstanding, clear, concise. Kudos!

[@alterickoo]

Really enjoyed the way you structurally explained the concepts and in a beginner friendly way. This is a great tutorial! Thanks man!

[@Teckstudio]

Awesome tutorial! As always!!! I love what you are doing 😍 One remark to the error field of zod: There is the function .flatten() which reduces the overcomplicated zodError to a simple object with the keys .formErrors and .fieldErrors. Just using that .fieldErrors as the return value would then make your code much cleaner in my eyes. I only mention this because .flatten() is overlooked in many zod-tutorials even though it is really usefull. 👍 Something like this: //On the server if(!res.success) return res.error.flatten().fieldErrors; //On the client (where errs is the return object from the server) for (let [key, err] of Object.entries(errs)) setError(key as any, { type: "server", message: err[0] });

[@nasarissa749]

What do you do when err[0] is of type 'unknown'

[@mohamaduhadijatu736]

This channel's content is next level . I really appreciate your work.

[@АртурХабибулин-ъ4д]

Very clear and accessible explanation, with a live example. Everything is strictly to the point, without unnecessary water. Thank you very much!!!

[@captainnoyaux]

I love your content I'm forwarding it to my colleagues that don't know yet some stuff you cover, thanks a lot !

[@janpapaj4373]

You are the GOAT of nextjs tutorials, amazing

[@edh9500]

You're a savage!! Thanks so much. Every sentence is valuable. On top of learning what I need to do, I pick up so many tips in how you write you code that I advance as a developer.

[@jrmayol857]

Awesome vid! The calmness of the voice, zen mode.

[@neilmerchant2796]

I really appreciate how effectively you explain every step and all surrounding context. 12/10

[@zubaydullookhunboboev8576]

Amazing tutorial. Your way of understanding by comparison from traditional to modern form with react hook form is great methodology. Thanks bro!

[@demembree]

Been stuck for one week with the first method (without library) and state not updating well, errors still displaying when the form is well filled. You saved me! You have the best react video.

[@DanielEmenikeCodes]

Your explanations are top-notch! Just subscribed. Thanks for the fine details

[@ericaugusto5640]

What an amazing tutorial, it's always easier for me to understand a concept when the problem is presented first. Thanks!

[@AcromondX]

I love your style of teaching

[@viniciusm.m.7822]

3:21 man, that's amazing, I've never seen it or even thought about it! Forte abraço do Brasil! God bless!

[@rezaainulzaki9651]

as always, you explained really well and beginner friendly

[@techlearner-hs3ft]

u really have great explanations, thanks a lot for helping me understanding react🙌

[@ByteGrad]

Happy to help!

[@lalasca6358]

Thanks.. Grad great explanation.

[@rounakbhattacherjee5288]

You earned a subscriber, what an explanation bro, what a comparison , keep up the good work buddy! Love from India❤

[@alsherifkhalaf7385]

You are simplify things and this helps me understand very well ❤🎉

[@elianismedina]

Thanks a lot for this video, very professional. You are a really good teacher . I understood everything. I have been watching your video for a while and I feel you are a pro

[@ytfriends7448]

I dont know why people are missing such a good channel thanks for the video by the way💜

[@spongebob93lover]

awesome tutorial!! I really like that you showed the traditional way of dealing with forms and compared the before/after. The explanation is very detailed and helpful for beginners. thank you!

[@ceeesmack]

I play this before I go to sleep because the monotone voice can help me fall asleep. I also played it to learn react hook form. It's a very good video for that too! ; )

[@supafast1314]

It was a very good amount of value in a single and fast video, thank you! However It would be great if you make a Part ll adding a solution like SWR or React Query to handle the Fetch/mutation logic and talk about the that solutions as well as it is a great topic too! Thank agan 🙏

[@kefamutuma6516]

Thank you . That was golden

[@youneshenni5417]

You're becoming one of my favourite dev youtubers. PS you might need a better microphone.

[@eliucastillo6976]

Bro, this is Gold (y)

[@aymenbachiri-yh2hd]

Thanks man, you're legend

[@buraxta_]

You're the best, we love you!

[@Fanaro]

Dang, with Zod, this looks really sharp.

[@abdelfadeel0]

Great explanation

[@nick-ui]

This is really great example how to use zod with hook form package

[@pasinduvinsuka]

The way you are explaining things are amazing 🔥🔥❤❤

[@123123123tomiasd1231]

Great video with great examples!!! loved it

[@wasimrafik3535]

first video liked it so much so just subscribed it

[@treyrader]

Gosh man you're such a pro! totally a wizard

[@this-is-clem-fandango]

instant subscribe you're such a good teacher

[@seniorui]

Well, I like this video. You show the negative case and the example of how to do it well. Great job!

[@rangerboi9715]

Hey Wesley! Good day I loved your tutorial could you also show us how to work with forms where we need an array of forms when we need to fill for situations like adding multiple users.

[@SugengWahyudi]

really clear tutorial. Your way explains is amazing

[@yuvalazaria]

Just great🎉 thank you very much

[@Pareshbpatel]

React Hook Form Tutorial. Compresenive and well explained. Thank you very much, Wesley. {2024-07-03}

[@chukwuemekamusic663]

wow... great one! thank you

[@dimitro.cardellini]

Pretty nice video. But, I do have one concern about needing the same schema for both the front-end and back-end. In my experience, it doesn't work that way. First, the set of fields can be different. For example, the back-end doesn't need the confirmPassword field. Second, the field names might not match. If the server uses snake case, the front-end doesn't necessarily have to follow suit. Third, the message format can differ even if the rules are the same. For instance, the front-end needs to support localization, whereas the back-end might only respond in English. Fourth, the rules can differ, and the reactions to them must also be different. For example, should we really display "Expected string, but received number" to the user? In this case, we should show "Something went wrong" and report the issue to Sentry (or another error reporting system), as it indicates a potential client-server integration issue that needs fixing. These differences exist because the goals of validation are different. Front-end validation aims to help users input correct data, while server-side validation ensures the data is correct. So, please consider using different schemas for front-end and back-end validation.

[@ezetenduwilliams7322]

Good job bro. This was detailed properly. I'd start using zod. +1 subscriber for you

[@NeerajShukla-t8n]

Superb thank you sir..

[@Julieyudowitch]

Thank-you this was very easy to follow

[@alionar60]

Wow! You're great, you explained it so well!

[@0xtz_]

👏🔥 amazing video 👏

[@b-vo8zf]

I love your videos. They always help me. Could you make a video about React Hook Form + Zod + React Select / Creatable, please?

[@MrBl0m]

Thanks !

[@ivanfranciscoj]

I think I love you bro, great tutorial. 👍🏻

[@meka4996]

Amazing!!! You are the man!

[@BritainRitten]

Excellent walkthrough

[@rishavsharma4206]

Hey Wesley, Fantastic content, have been looking for this tutorial and you my dear friend, nails every topic that you teach. 💓 Would love to follow along with some initial code. Although, you have provided the final code, it would be great if you share initial code as well in a branch so we can also follow and code while learning from you. P.S. Please keep showering us with your knowledge. I am saving money to buy the new Next.js and React course, hopefully will be able to see you there as well. Thanks for everything Wesley 🖤

[@zaeemahmad910]

well explained Subscribed 💚

[@ahmedkaram3829]

good video and nice to share this knowledge

[@sandrogtz]

This was unbelievable helpful

[@HenryBabbage]

Exactly the video I needed

[@tonyeneh8194]

awesome! Thanks a lot

[@27sosite73]

thank you

[@naveedalirehmani4135]

Great video, can you also make a video explaining how to use react-hook-forms with a UI library or a Framework? maybe shadcn.

[@learner8084]

Very useful video. Thank you ! I used formik before. In formik, I can wrap the component so that I can have multiple level components and I can still pass the name of the field down and I can access formik. How can I achieve the same in React Hook Form ? Thanks.

[@dhirajavasthi6539]

your content is very helpful can you please help me with the below problem using zod and next js 13 or 14 problem: How to read content of uploaded json file on react / next.js 13 or 14 using zod

[@mohdsahil226]

Thank you! Would you please do it with NextJs Server Actions instead of API route?

[@CistiC0987]

Great video! How can I get your nextjs course? From what I've seen from you, it has to be a good stuff

[@ByteGrad]

Thanks. It’s coming out soon. 😉 Make sure you’re on the email list

[@ollebergkvist8538]

valibot is a less than 1kb type-safe alternative to zod (very similiar api), i believe that's a better package to use for client-side forms if you want to make sure to get good first load js values :) zod is quite a heavy package that's more suitable to implement server-side until they fix the bundlesize...

[@adnanamin3666]

The best! 👌😊

[@alexreyes-cn9ru]

this is great, I just got a question, can you tell us something about react-hook-forms with EXPO

[@fooked1]

Any advice on handling localization with Zod and RHF?

[@ajibadesokunbi1318]

the link you dropped links to a next js react boilerplate

[@jellyfish1772]

Just one issue: before using zod you would get the errror "pasword is requried" when you didnt give any passwords. then after you give some passwords you might get the "password is short" error. But now after using zod you dont get the "password is required" error ever. You only get the "password short" error

[@bimonnongsiej]

I was so engrossed in the video that it didn't feel like 30 minutes at all.

[@thebocksters2756]

please increase your microphone. Nice video

[@Fanaro]

Super dope.

[@dannydg1985]

How do you implement this when also using server actions with useFormSate / useActionSate? I currently have an implementation using a client-side form action that calls trigger of react-hooks-form to validate the form.

[@Fanaro]

I'm really interested in seeing your approach to global state.

[@pheisar]

so between using a server action and api post route, you'd recommend using a route handler?

[@ByteGrad]

I don’t have a strong opinion on that now, but in future server actions will be the standard. I used route handler in this video because more people will be familiar with it

[@shteev]

Is it possible to do forms and form validation if you're using server components? I imagine you'd have to split the inputs out into use client components, but then how does it get connected to the useForm hook?

[@DawitMesfin-cs8fj]

sir it is awesome tutorial but please make your sound neat and talk a little bit slow. don't forget your followers are from all over the world

[@odogru77]

After creating the form-with-react-hook-form-with-zod-and-server, it shows an error as "form-with-react-hook-form-with-zod-and-server can not be used as a JSX component", other forms work perfectly fine.

[@abukhalidrifat3994]

During server side validations I need to manually check using if condition. Is there any shortcut for that?

[@UP209D]

Should we use different returned http code for the one with errors

[@ByteGrad]

Yes