React Hook Form (+ Zod) - Complete Tutorial

Подписаться 124 тыс.

Просмотров 80 тыс.

50% 1

👉 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

Опубликовано:

1 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 130

@ByteGrad 3 месяца назад

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.

@TheLondekZdroj 6 месяцев назад

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

@FGA-47 9 месяцев назад

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 8 месяцев назад

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

@editin232 9 месяцев назад

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

@edh9500 12 дней назад

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.

@user-ru8hn9hb5c 8 месяцев назад

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

@user-fg8jh4do8j 6 месяцев назад

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

@Julia_K7 9 месяцев назад

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 8 месяцев назад

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!

@Fishamble 7 месяцев назад

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.

@musiuralamopu9589 4 месяца назад

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

@Anonymousssss368 9 месяцев назад

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 9 месяцев назад

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

@VincentFulco 9 месяцев назад

Outstanding, clear, concise. Kudos!

@SaurabhThapliyal-pu3vs 3 месяца назад

I must say, this RU-vid 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!

@alterickoo 8 месяцев назад

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

@Wilmar06210 6 месяцев назад

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

@zubaydullookhunboboev8576 7 месяцев назад

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

@neilmerchant2796 8 месяцев назад

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

@DanielEmenikeCodes 9 месяцев назад

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

@user-nd9ce7ul4e 7 месяцев назад

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

@spongebob93lover 7 месяцев назад

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!

@captainnoyaux 4 месяца назад

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

@jrmayol857 9 месяцев назад

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

@ericaugusto5640 5 месяцев назад

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

@demembree 7 месяцев назад

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.

@rezaainulzaki9651 9 месяцев назад

as always, you explained really well and beginner friendly

@alsherifkhalaf7385 Месяц назад

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

@123123123tomiasd1231 7 месяцев назад

Great video with great examples!!! loved it

@AcromondX 6 месяцев назад

I love your style of teaching

@elianismedina 7 месяцев назад

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

@rounakbhattacherjee5288 2 месяца назад

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

@seniorui 3 месяца назад

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

@alionar60 8 месяцев назад

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

@SugengWahyudi 5 месяцев назад

really clear tutorial. Your way explains is amazing

@lalasca6358 7 месяцев назад

Thanks.. Grad great explanation.

@viniciusm.m.7822 7 месяцев назад

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

@treyrader 4 месяца назад

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

@pasinduvinsuka 6 месяцев назад

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

@this-is-clem-fandango 6 месяцев назад

instant subscribe you're such a good teacher

@buraxta_ Месяц назад

You're the best, we love you!

@Fanaro 9 месяцев назад

Dang, with Zod, this looks really sharp.

@BritainRitten 10 месяцев назад

Excellent walkthrough

@ytfriends7448 4 месяца назад

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

@meka4996 8 месяцев назад

Amazing!!! You are the man!

@Julieyudowitch 9 месяцев назад

Thank-you this was very easy to follow

@wasimrafik3535 8 месяцев назад

first video liked it so much so just subscribed it

@kefamutuma6516 2 месяца назад

Thank you . That was golden

@ezetenduwilliams7322 9 месяцев назад

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

@abdelfadeel0 5 месяцев назад

Great explanation

@supafast1314 5 месяцев назад

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 🙏

@ceeesmack 4 месяца назад

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! ; )

@sandrogtz 8 месяцев назад

This was unbelievable helpful

@ahmedkaram3829 9 месяцев назад

good video and nice to share this knowledge

@Teckstudio 9 месяцев назад

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 7 месяцев назад

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

@ivanfranciscojara6071 8 месяцев назад

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

@nick-ui 9 месяцев назад

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

@0xtz_ 10 месяцев назад

👏🔥 amazing video 👏

@yuvalazaria 4 месяца назад

Just great🎉 thank you very much

@aymenbachiri-yh2hd 3 дня назад

Thanks man, you're legend

@youneshenni5417 9 месяцев назад

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

@HenryBabbage 8 месяцев назад

Exactly the video I needed

@techlearner-hs3ft Месяц назад

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

@ByteGrad Месяц назад

Happy to help!

@adnanamin3666 8 месяцев назад

The best! 👌😊

@rangerboi9715 6 месяцев назад

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.

@rishavsharma4206 5 месяцев назад

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 🖤

@b-vo8zf 5 месяцев назад

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

@MrBl0m 8 месяцев назад

Thanks !

10 месяцев назад

Will the async method handleSubmit be awaited or how does that work, is the handle event prepare for async methods?

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

@27sosite73 6 месяцев назад

thank you

@shteev 7 месяцев назад

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?

@anishgupta2659 8 месяцев назад

In route.ts, the zod validation is to be used before the actual api call to the backend/database is made right?

@dubekone 9 месяцев назад

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?

@alexreyes-cn9ru 7 месяцев назад

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

@Fanaro 9 месяцев назад

Super dope.

@ollebergkvist8538 8 месяцев назад

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

@Fanaro 9 месяцев назад

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

@mohdsahil226 5 месяцев назад

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

@philipjohn2038 10 месяцев назад

Perfect 👍

@naveedalirehmani4135 6 месяцев назад

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

@dhirajavasthi6539 6 месяцев назад

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

@keristang7208 4 месяца назад

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?

@CistiC0987 10 месяцев назад

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

@ByteGrad 10 месяцев назад

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

@pheisar 10 месяцев назад

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

@ByteGrad 10 месяцев назад

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

@giannifed 10 месяцев назад

Great tutorial. Thank you

@abukhalidrifat3994 23 дня назад

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

@nutshellggdarken7114 8 месяцев назад

What do you use to get the autocomplete feature in vscode? :O

@toluwanimiadeyemo8099 9 месяцев назад

New lesson learnt

@fooked1 7 месяцев назад

Any advice on handling localization with Zod and RHF?

@bimonnongsiej 6 месяцев назад

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

@user-bj1lu1jn6k 5 месяцев назад

Hello. What kind or name is there with the vscode extensions auto-complete code.

@frostmichael8360 9 месяцев назад

Awesome, Thanks ! Could you make one tutorial for React Hook Form in a nested structure ? I know it would be eazy but i'm choking with, without be able to understand why >_< (yeah, beginner level here ^^ thanks again for your content !)

@ByteGrad 9 месяцев назад

Great suggestion!

@UP209D 6 месяцев назад

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

@ByteGrad 6 месяцев назад

Yes

@saifullahrahman 9 месяцев назад

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.