React Hook Form (+ Zod) - Complete Tutorial
HTML-код
- Опубликовано: 6 июл 2024
- 👉 NEW React & Next.js Course: bytegrad.com/courses/professi...
Learn:
1) Traditional form (without React Hook Form)
2) Form with React Hook Form
3) Form with React Hook Form and Zod
4) Form with React Hook Form and Zod and server-side errors
Complete code: github.com/ByteGrad/react-hoo...
Hi, I'm Wesley. I'm a brand ambassador for Kinde (paid sponsorship).
👉 Add authentication to your app FAST: bit.ly/3QOe1Bh
👉 NEW React & Next.js Course: bytegrad.com/courses/professi...
👉 Professional JavaScript Course: bytegrad.com/courses/professi...
👉 Professional CSS Course: bytegrad.com/courses/professi...
👉 Discord: all my courses have a private Discord where I actively participate
🔔 Email newsletter (BIG update soon): email.bytegrad.com
⏱️ Timestamps:
0:00 Intro
0:27 Traditional form
8:50 Adding React Hook Form
17:59 Before & After
18:54 Adding Zod
27:25 Adding server errors
#webdevelopment #programming #coding
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.
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 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!
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 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
Waoh, single handedly teaching React form validation in 30 minutes with clear explaination.
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.
this course is really well organized and should be popular more!
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! 🖤
Outstanding, clear, concise. Kudos!
I must say, this RUclips 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!
Awesome vid! The calmness of the voice, zen mode.
Really enjoyed the way you structurally explained the concepts and in a beginner friendly way. This is a great tutorial! Thanks man!
You are the GOAT of nextjs tutorials, amazing
I love your content I'm forwarding it to my colleagues that don't know yet some stuff you cover, thanks a lot !
Very clear and accessible explanation, with a live example. Everything is strictly to the point, without unnecessary water. Thank you very much!!!
I love your style of teaching
I really appreciate how effectively you explain every step and all surrounding context. 12/10
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 !🎉
as always, you explained really well and beginner friendly
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.
Bro, this is Gold (y)
What an amazing tutorial, it's always easier for me to understand a concept when the problem is presented first. Thanks!
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!
You are simplify things and this helps me understand very well ❤🎉
Great video with great examples!!! loved it
You're the best, we love you!
Amazing tutorial. Your way of understanding by comparison from traditional to modern form with react hook form is great methodology. Thanks bro!
Thank you . That was golden
Your explanations are top-notch! Just subscribed. Thanks for the fine details
Wow! You're great, you explained it so well!
Dang, with Zod, this looks really sharp.
Thanks man, you're legend
Well, I like this video. You show the negative case and the example of how to do it well. Great job!
Excellent walkthrough
well explained
Subscribed 💚
Thank-you this was very easy to follow
Thanks.. Grad great explanation.
Superb thank you sir..
Amazing!!! You are the man!
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.
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
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'
awesome! Thanks a lot
really clear tutorial. Your way explains is amazing
instant subscribe you're such a good teacher
Just great🎉 thank you very much
This was unbelievable helpful
3:21 man, that's amazing, I've never seen it or even thought about it!
Forte abraço do Brasil!
God bless!
Gosh man you're such a pro! totally a wizard
You earned a subscriber, what an explanation bro, what a comparison , keep up the good work buddy! Love from India❤
Exactly the video I needed
Great explanation
The way you are explaining things are amazing 🔥🔥❤❤
Thanks !
This is really great example how to use zod with hook form package
I dont know why people are missing such a good channel thanks for the video by the way💜
u really have great explanations, thanks a lot for helping me understanding react🙌
Happy to help!
React Hook Form Tutorial. Compresenive and well explained. Thank you very much, Wesley.
{2024-07-03}
first video liked it so much so just subscribed it
👏🔥 amazing video 👏
thank you
I think I love you bro, great tutorial. 👍🏻
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! ; )
Good job bro. This was detailed properly. I'd start using zod. +1 subscriber for you
good video and nice to share this knowledge
The best! 👌😊
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 🙏
Will the async method handleSubmit be awaited or how does that work, is the handle event prepare for async methods?
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.
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.
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.
Thank you! Would you please do it with NextJs Server Actions instead of API route?
You're becoming one of my favourite dev youtubers. PS you might need a better microphone.
Perfect 👍
In route.ts, the zod validation is to be used before the actual api call to the backend/database is made right?
Any advice on handling localization with Zod and RHF?
Super dope.
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?
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?
New lesson learnt
What do you use to get the autocomplete feature in vscode? :O
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'm really interested in seeing your approach to global state.
During server side validations I need to manually check using if condition. Is there any shortcut for that?
I love your videos. They always help me. Could you make a video about React Hook Form + Zod + React Select / Creatable, please?
the link you dropped links to a next js react boilerplate
this is great, I just got a question, can you tell us something about react-hook-forms with EXPO
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 🖤
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 tutorial. Thank you
what's your vscode color theme?
Hello. What kind or name is there with the vscode extensions auto-complete code.
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
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.
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
Great video, can you also make a video explaining how to use react-hook-forms with a UI library or a Framework? maybe shadcn.