Тёмный

Building Great Forms with React Hook Form & Zod 

Vlad Nicula
Подписаться 936
Просмотров 15 тыс.
50% 1

In this video we build a Sign up form and integrate it with a dummy backend API. We discuss about the structure of the form, the separation of concerns in a few components, validation using Zod as well as handling server errors.
Useful Links (which I cannot yet add as link due to youtube being strict for new accounts)
Github Repo: github.com/vladnicula/making-forms-great-again-with-react-hook-form
React Hook Form: react-hook-form.com
React Daisy UI: react.daisyui.com/?path=/story/welcome--page
Zod: github.com/colinhacks/zod
HookFrom Integration with Zod: react-hook-form.com/get-started#SchemaValidation
Imperative Handle Hook: beta.reactjs.org/reference/react/useImperativeHandle
Chapters:
0:00:00 Intro.
0:02:07 Final Result Overview.
0:03:19 Starter Project Overview.
0:05:01 Building the Basic Form.
0:18:44 Reusable Text Field.
0:33:10 Form Validation with Zod.
0:44:45 Submitting the Form.
0:56:10 Handling Server Errors.
1:21:00 Disabling the button while submitting.
1:23:57 Working with Redirects and Routing.
1:33:07 Recap and Outro.

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

 

8 июл 2024

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 108   
@DetectiveMichealScarn
@DetectiveMichealScarn Год назад
A very informative video. I can't wait to see what else you're able to produce!
@vlad.nicula
@vlad.nicula Год назад
Thank you! I just spoke at a meetup and presented this exact topic and got a few questions. Some of the next things would be integrating component libraries with more advanced components, more error handling, and conditional fields (showing some fields instead of others based on the content already filled in other fields)
@joshtriedcoding
@joshtriedcoding Год назад
Those technologies you're using seem promising, looking forward to the series!
@vlad.nicula
@vlad.nicula Год назад
thanks! I’ll see what questions I receive this week and create a few answer videos related to this next 👍
@RudraSingh-pb5ls
@RudraSingh-pb5ls Год назад
And i m here to help you 🙃
@Cahnisama
@Cahnisama Год назад
Looking foward to the videos, subbed. I was mid refactoring an old project with React Hook Form, this came into a very good timing for me.
@vlad.nicula
@vlad.nicula Год назад
Welcome aboard! I'm happy to hear this helps, and I hope you'll tag along for the next ones.
@faris.abuali
@faris.abuali 5 месяцев назад
I am glad I've just completed the entire video Much informative and exciting! Thanks a million
@ricardogayer4661
@ricardogayer4661 Год назад
Excellent video! Congratulations!
@vlad.nicula
@vlad.nicula Год назад
Thank you very much! I hope you'll tag along for the next ones!
@bluebill1049
@bluebill1049 Год назад
This is awesome! Thanks for creating those.
@vlad.nicula
@vlad.nicula Год назад
well hello there ☺️. Sure, my pleasure. I’m surprised you found this video 😮😅 Thank you for creating and maintaining such an awesome form library👍
@bluebill1049
@bluebill1049 Год назад
🚀 keep it up with awesome content 🚀
@ashish_prajapati_tr
@ashish_prajapati_tr Год назад
helping you to break youtube algorithm
@vlad.nicula
@vlad.nicula Год назад
thank you kindly :D
@harshvirtomar6552
@harshvirtomar6552 Год назад
Just what i wanted got recommended! Keep going bro!
@vlad.nicula
@vlad.nicula Год назад
thank you for your feedback 🙏I will continue to record some form videos next month
@seschaitanya5676
@seschaitanya5676 Год назад
This is awesome!! Great work with separating concerns and handling that server error with useImperetive Hook is such a chef's kiss.
@vlad.nicula
@vlad.nicula Год назад
Glad you enjoyed it and thanks for the feedback! I hope you'll tag along for the next ones as well. I'm recording a few videos about controlled components now and will end up with a clean separation of concerns with those too.
@merotuts9819
@merotuts9819 Год назад
I agree, I never thought about using that hook for server-side error handling on my React-hook-forms. It's amazing :D
@vlad.nicula
@vlad.nicula Год назад
@@merotuts9819 thanks 🙏 I’m happy it is helpful
@bogdanpintican
@bogdanpintican Год назад
Congrats Vlad on your first video! 🚀
@vlad.nicula
@vlad.nicula Год назад
Thanks Bogdan! Happy to see you here. I hope you'll tag along in the next ones as well :D
@Chiny_w_Pigulce
@Chiny_w_Pigulce Год назад
Thanks a lot, I'm actually starting a new project and was thinking of replacing Formik + Yup I used before with the React Hook Form + Zod. The video is really helpful.
@vlad.nicula
@vlad.nicula Год назад
thank you for your feedback, I’m glad it was helpful! ☺️
@EnglishRain
@EnglishRain Год назад
Thank you, great stuff!
@vlad.nicula
@vlad.nicula Год назад
thanks for the feedback! I hope you'll join me for the next one as well! :)
@bigmacsawce
@bigmacsawce Год назад
Awesome video . Great in depth guide to awesome libraries
@vlad.nicula
@vlad.nicula Год назад
Thank you kindly! I hope you'll tag along for the next ones as well!
@goldentendon
@goldentendon Год назад
@@vlad.nicula if you could make a multi step form with the same stack that would be awesome!
@vlad.nicula
@vlad.nicula Год назад
@@goldentendon noted, it’s on my list. First I’ll probably do a component integration one, as we will need a few more things not just text inputs moving forward
@zlatkoiliev8927
@zlatkoiliev8927 Год назад
Very well explained, and really good example! The first time I see someone on youtube to use TS properly and to think about reusability and clean architecture! Please keep posting more of your videos!
@vlad.nicula
@vlad.nicula Год назад
thanks! I’ll keep posting 👍
@user-zw7mx2pl1j
@user-zw7mx2pl1j 7 месяцев назад
@@vlad.nicula thanks for sharing, this is really beneficial, i hope you'll keep sharing more of this on your YT channel
@nyfever008
@nyfever008 Год назад
This is really interesting approach. learn a lot. thanks!
@vlad.nicula
@vlad.nicula Год назад
Glad to hear that! I'll release more stuff like this related to forms for a while, I hope you'll tag along for the next ones!
@ButonasulJucaus
@ButonasulJucaus Год назад
That is very helpful, keep it up! 💯
@vlad.nicula
@vlad.nicula Год назад
Thanks, will do!
@arjun-de6dr
@arjun-de6dr Год назад
Here from reddit Hopefully I will learn something new Excited Thank you
@vlad.nicula
@vlad.nicula Год назад
thanks for the feedback! I hope you'll tag alone in the next ones as well 👍
@amantulsyan1082
@amantulsyan1082 Год назад
Hey, thanks for putting this out there this video was really helpful
@vlad.nicula
@vlad.nicula Год назад
Thank you for your feedback, I’m glad it was useful to you. I’m going to make another one about integrating component libraries soon. I hope you’ll tag along for that one as well 😊
@amantulsyan1082
@amantulsyan1082 Год назад
@@vlad.nicula yes sure, definitely
@vivianneh9075
@vivianneh9075 Год назад
🔥🔥
@iUmerFarooq
@iUmerFarooq Год назад
Great explanation Bro ☺️
@vlad.nicula
@vlad.nicula Год назад
Glad you liked it. I’m working on another one about integrating component libraries with RHF. I hope you’ll tag along for that one as well 😊
@TheProcessor
@TheProcessor Год назад
Lol useImperativeHandle was not on my radar but figured useRef would get used. Nice video.
@vlad.nicula
@vlad.nicula Год назад
Thanks! 👍
@user-oz1ig4mw3u
@user-oz1ig4mw3u Год назад
thank you!
@vlad.nicula
@vlad.nicula Год назад
my pleasure, I hope you will tag along for the next ones 😌
@MrDM717
@MrDM717 Год назад
Excellent!
@vlad.nicula
@vlad.nicula Год назад
thank you
@VivianneHaschi
@VivianneHaschi Год назад
🔥🔥🔥
@Edwinil
@Edwinil Год назад
Thank you sensei
@vlad.nicula
@vlad.nicula Год назад
😅 well… that’s the first time someone called me that. I’m happy it was helpful 🙏
@Edwinil
@Edwinil Год назад
@@vlad.nicula thank your video I could make my form that has 4 children components, one of them is a dynamic array of objects with file upload, and another one is a signature canvas.
@vlad.nicula
@vlad.nicula Год назад
@@Edwinil oh nice, I never used a signature canvas as an input, is there a react component for it?
@Edwinil
@Edwinil Год назад
@@vlad.nicula yes react-signature-canvas
@merotuts9819
@merotuts9819 Год назад
A much needed video Vlad. 🙆‍♂ Could you also do one on error validation on Controlled components using React-hook-form & zod ?
@vlad.nicula
@vlad.nicula Год назад
yeah, I am. Check out the date picker one, it might be enough. Zod or normal validation should work the same way.
@dolahav3007
@dolahav3007 Год назад
Very interesting! Nice usage of the useImperativeHandle hook, however I suppose that in this case you could've just thrown an error if !response.success and let the SignUpForm component handle it. But this was a nice explanation of it.
@vlad.nicula
@vlad.nicula Год назад
yeah that works too but sometimes you also wanna focus the first field that has an error 👍
@vladgrecu9080
@vladgrecu9080 Год назад
🚀🚀🚀
@vlad.nicula
@vlad.nicula Год назад
someone is a night owl 🦉😄
@teknolovedigital
@teknolovedigital Год назад
Zod is very amazing..
@vlad.nicula
@vlad.nicula Год назад
yep, it brings typescript in the runtime 👌
@UncleDavid
@UncleDavid Год назад
#HelpingTheAlgo
@batemady
@batemady Год назад
Awsome
@vlad.nicula
@vlad.nicula Год назад
Thanks! I hope you'll check the next ones out as well when they come out :D
@alimoghadam6464
@alimoghadam6464 Год назад
This is great! I've used Yup with hook form, but it's not as good as Zod when we have typescript. I should probably switch to Zod :))
@vlad.nicula
@vlad.nicula Год назад
I used yup too until mid 2022 and found switching to be a bit uncomfortable at first, but then I just got used to it.
@zksumon847
@zksumon847 Год назад
Great. Here from reddit.
@vlad.nicula
@vlad.nicula Год назад
welcome, thanks for joining, I hope you'll tag alone in the next ones as well 👋
@andrijaantunovic8756
@andrijaantunovic8756 Год назад
Great video! I love your considerations for separation of concerns. For the Login button why not give it type="button" instead of preventDefault (I mean for the general example before you wrapped it in Next's Link). Also if we were not using Next (Link) it may be better for accessibility to have an that is only visually styled like a button. And I would like to see what is the best way to pass props when navigating to a new page after the form submit - for example if the backend returns a response with a message "Sign up successful", and we redirect to /, how can we pass this message to be displayed on /?
@vlad.nicula
@vlad.nicula Год назад
good points about the button type and the link. And yes, a next link would work better. I used the router push because I already had a router used on the page. Regarding the navigation and data passing, I don’t have a preferred approach. Usually a get param is enough, so a successful login redirects to home?login=success or something like that, or of we want to be fancier the get param is a key that is used to ask the server again for that message. Another approach I saw was to keep a session storage value, that way you only see the message once. Thanks for the feedback and the question. I think I’ll add the button trick in my class next time I teach this 👍
@jitx2797
@jitx2797 Год назад
Awesome tutorial. Just a suggestion the video looks streched to me. Please look into that .
@vlad.nicula
@vlad.nicula Год назад
Thanks for pointing it out. I’m 100% new to vídeo editing. I hope you’ll tag along for the next out and provide more feedback ☺️
@jitx2797
@jitx2797 Год назад
@@vlad.nicula yea sure. Into 20 mins of watching your tutorial and it's very good. Easy to understand, simple, clear and concise. Awesome tutorial buddy.
@Edwinil
@Edwinil Год назад
I wonder if it is possible to re-render an SSC from a CSC. For example, I got my Server Component and it's a list of products and one button to add new products which fire a Form (Client component) after filling it, the submit could update the Server List component?
@vlad.nicula
@vlad.nicula Год назад
hm… I’m afraid I can’t help with server components as I did not have a chance to use them 😔
@a89529294
@a89529294 Год назад
😀
@heteibako
@heteibako Год назад
You could have saved all the prop declarations with DetailedHTMLProps generic. :)
@vlad.nicula
@vlad.nicula Год назад
Making a mental note to Google and read about that 😅
@somebody-17546
@somebody-17546 Год назад
I usually use react-hook-form with yup for validation. Is zod better than yup ?
@vlad.nicula
@vlad.nicula Год назад
zod seems to be more adopted by the typescript community and is more likely to grow in the next few years. In 2022 I used both and saw no difference in terms of capabilities between the two 👍
@pikapikabooboo
@pikapikabooboo Год назад
Can you please explain when we should be using useCallback, useMemo, and useRef hooks?
@vlad.nicula
@vlad.nicula Год назад
I’ll try to be more mindful when using those hooks in the next videos and point out when we need to use them and why. Thanks for asking 👍 Is there a particular situation in the video that you want to ask about or is your question in general?
@JoelRdz
@JoelRdz 11 месяцев назад
This is excellent thank you very much! I just don't understand what you're doing in the TextField spread {...(props.inputProps ?? {})}
@vlad.nicula
@vlad.nicula 11 месяцев назад
I'm spreading an object, and if it doesn't exist, I avoid an error by providing and empty object to the spread operation 👍
@samuelpalacios9661
@samuelpalacios9661 Год назад
Awesome tutorial, really quality content, I have a question btw, my inputs shrink after the error message dissapears (maybe it's that their sizes are kinda different), any idea you could give me to solve this?
@vlad.nicula
@vlad.nicula Год назад
Not sure what you mean by shrink but I did encounter situations where the error message was adding some margin when the message existed, yet when there was no error there was no element to add that space either, so the inputs would move on the screen vertically. Leaving an empty placeholder or adding a css margin on the input when it does not have errors solved this for me
@samuelpalacios9661
@samuelpalacios9661 Год назад
@@vlad.nicula Hey, thanks, by shrink i mean that all the input sizes reduces when the error message dissapears, so i was wondering if there's a way to keep the size consistent
@vlad.nicula
@vlad.nicula Год назад
@@samuelpalacios9661 oh yeah that’s CSS. Maybe set a flex stretch or fixed width to the inputs
@samuelpalacios9661
@samuelpalacios9661 Год назад
@@vlad.nicula Ty!!!
@alibayatmokhtari
@alibayatmokhtari Год назад
What is the VSCode color theme?
@vlad.nicula
@vlad.nicula Год назад
apparently it is called Codesandbox Black 2021. I think it is this one: marketplace.visualstudio.com/items?itemName=siddharthkp.codesandbox-black And for the font I use Fira Code: fonts.google.com/specimen/Fira+Code?preview.text=%3D%3E%20()%20!%3D%3D%20!%3D%20%3C%3D%20%3E%3D%20%7B%7D&preview.text_type=custom
@DmitriySidorenko
@DmitriySidorenko 4 месяца назад
Create content! BTW, to prevent button from submitting the form just add type="button"
@hakuna_matata_hakuna
@hakuna_matata_hakuna Год назад
all that complxity and it can't do something simple like only hiding a button until the input has some text in it
@vlad.nicula
@vlad.nicula Год назад
yeah, forms are complicated 😞
@DmitriySidorenko
@DmitriySidorenko 4 месяца назад
What makes you think it can’t do this? But anyway it is bad UX to hide button before the validation passes
@kevinmcaloon9625
@kevinmcaloon9625 2 месяца назад
So hard to just sit here and watch him struggle around 1:10:00 and not to talk to the screen telling him to check the spelling!
@predok_mif
@predok_mif Год назад
The author learned English from Indians)))))
@vlad.nicula
@vlad.nicula Год назад
ahm oke, that’s a new one
@predok_mif
@predok_mif Год назад
@@vlad.nicula It's just a joke ^_^
@DmitriySidorenko
@DmitriySidorenko 4 месяца назад
Rude
Далее
아이스크림으로 체감되는 요즘 물가
00:16
3M❤️ #thankyou #shorts
00:14
Просмотров 8 млн
React Hook Form - Complete Tutorial (with Zod)
28:22
Просмотров 89 тыс.
React Formik Tutorial with Yup (React Form Validation)
34:50
State Managers Are Making Your Code Worse In React
13:33
Goodbye, useEffect - David Khourshid
29:59
Просмотров 495 тыс.
This New React Hook Changes How You Use Forms
8:34
Просмотров 86 тыс.
Enums considered harmful
9:23
Просмотров 197 тыс.
아이스크림으로 체감되는 요즘 물가
00:16