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.
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!
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!
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.
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
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!
I must say, this UA-cam 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!
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! 🖤
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 !🎉
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.
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.
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.
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!
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] });
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
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! ; )
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 🙏
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.
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.
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 🖤
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.
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?
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
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
There is one problem with this, .optional() wont work to make a field not required. I had to use a workaround for this. Any idea why it doesnt work? Also if the input is number, it gives errors.
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.
Рік тому
Will the async method handleSubmit be awaited or how does that work, is the handle event prepare for async methods?
Hello did you know if .refine can have multiple validations?, for example in the video u use .refine((data) => validation, {message, path}) how could i do multiple validations?
Hi im newbie of nodejs, nextjs , i saw when you type in the visual studio code there is intellisence. how you got all the intellisense like visual studio. what plugin do you install?
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...
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.
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!
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!.
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!
It was definitely not easy to find a good tutorial for nextjs, react-hook-form and zod. This is a great resource!
You going trough the traditional way of creating a form is so useful to me as a new developer.
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.
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
Your tutorials are so flawless, descriptive, it doesn't seem like some human is making them.
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!
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!
I must say, this UA-cam 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!
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! 🖤
Waoh, single handedly teaching React form validation in 30 minutes with clear explaination.
Amazing and straight to point, it's equivalent to hours of other courses.
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 !🎉
this course is really well organized and should be popular more!
Very clear and accessible explanation, with a live example. Everything is strictly to the point, without unnecessary water. Thank you very much!!!
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.
Really enjoyed the way you structurally explained the concepts and in a beginner friendly way. This is a great tutorial! Thanks man!
I love your content I'm forwarding it to my colleagues that don't know yet some stuff you cover, thanks a lot !
Awesome vid! The calmness of the voice, zen mode.
This channel's content is next level . I really appreciate your work.
Outstanding, clear, concise. Kudos!
You are the GOAT of nextjs tutorials, amazing
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.
Amazing tutorial. Your way of understanding by comparison from traditional to modern form with react hook form is great methodology. Thanks bro!
What an amazing tutorial, it's always easier for me to understand a concept when the problem is presented first. Thanks!
I really appreciate how effectively you explain every step and all surrounding context. 12/10
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.
Thank you so much!
Your explanation is so clear, step by step and easy to understand and follow.
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!
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] });
What do you do when err[0] is of type 'unknown'
Your explanations are top-notch! Just subscribed. Thanks for the fine details
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
3:21 man, that's amazing, I've never seen it or even thought about it!
Forte abraço do Brasil!
God bless!
You earned a subscriber, what an explanation bro, what a comparison , keep up the good work buddy! Love from India❤
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! ; )
as always, you explained really well and beginner friendly
I dont know why people are missing such a good channel thanks for the video by the way💜
You are simplify things and this helps me understand very well ❤🎉
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 🙏
I love your style of teaching
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.
instant subscribe you're such a good teacher
The way you are explaining things are amazing 🔥🔥❤❤
if it was possible to give a thousands of likes i would do it, thanks a lot for this amazing knowledge big bro
You're becoming one of my favourite dev youtubers. PS you might need a better microphone.
Gosh man you're such a pro! totally a wizard
really clear tutorial. Your way explains is amazing
u really have great explanations, thanks a lot for helping me understanding react🙌
Happy to help!
amazing, thanks for showing all sides
Good job bro. This was detailed properly. I'd start using zod. +1 subscriber for you
Great video with great examples!!! loved it
Wow! You're great, you explained it so well!
You're the best, we love you!
This is really great example how to use zod with hook form package
Thanks.. Grad great explanation.
wow... great one! thank you
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.
Dang, with Zod, this looks really sharp.
Amazing!!! You are the man!
Thank-you this was very easy to follow
I think I love you bro, great tutorial. 👍🏻
I love your videos. They always help me. Could you make a video about React Hook Form + Zod + React Select / Creatable, please?
Bro, this is Gold (y)
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 🖤
first video liked it so much so just subscribed it
Thank you! Would you please do it with NextJs Server Actions instead of API route?
Excellent walkthrough
This was unbelievable helpful
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.
👏🔥 amazing video 👏
Exactly the video I needed
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?
The best! 👌😊
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
Great explanation
Thanks man, you're legend
Just great🎉 thank you very much
this is great, I just got a question, can you tell us something about react-hook-forms with EXPO
so between using a server action and api post route, you'd recommend using a route handler?
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
good video and nice to share this knowledge
Any advice on handling localization with Zod and RHF?
Great video! How can I get your nextjs course? From what I've seen from you, it has to be a good stuff
Thanks. It’s coming out soon. 😉 Make sure you’re on the email list
Super super super helpful
Superb thank you sir..
well explained
Subscribed 💚
There is one problem with this, .optional() wont work to make a field not required.
I had to use a workaround for this.
Any idea why it doesnt work?
Also if the input is number, it gives errors.
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.
Will the async method handleSubmit be awaited or how does that work, is the handle event prepare for async methods?
Thanks !
During server side validations I need to manually check using if condition. Is there any shortcut for that?
Hello did you know if .refine can have multiple validations?, for example in the video u use .refine((data) => validation, {message, path}) how could i do multiple validations?
Hi im newbie of nodejs, nextjs , i saw when you type in the visual studio code there is intellisence. how you got all the intellisense like visual studio. what plugin do you install?
Great video, can you also make a video explaining how to use react-hook-forms with a UI library or a Framework? maybe shadcn.
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...
Should we use different returned http code for the one with errors
Yes
awesome! Thanks a lot
Hello. What kind or name is there with the vscode extensions auto-complete code.
thank you
What do you use to get the autocomplete feature in vscode? :O