Typescript & Zod tutorial with React-Hook-Form

Learn how to use TypeScript & Zod validation together in this tutorial. We will also apply TypeScript & Zod with React-Hook-Form to provide both user input validation and feedback. TS + Zod together provides both type safety and runtime type checking!

🚀 Become a full-stack web dev with Zero To Mastery Courses:

👇 Follow Me On Social Media:

Typescript & Zod tutorial with React-Hook-Form

(00:00) Intro
(00:05) Welcome
(00:28) What is Zod? And does Zod do?
(01:35) Starter Code & Dependencies
(02:30) Basic Zod Examples
(04:48) User API Data
(05:07) Basic User Schema with Zod
(10:05) Inferring Types, Fetching & Parsing Data
(12:47) Merging & Extending Zod Schemas
(18:34) React-Hook-Form dependencies
(19:21) React-Hook-Form docs
(20:54) zodResolver & React-Hook-Form

📚 Tutorial References:

⚙ Web Dev Tools:

Was this Zod & TypeScript tutorial with React-Hook-Form helpful? If so, please share. Let me know your thoughts in the comments.

#typescript #zod #tutorial

[icongrindsetsfj]

As a Javascript developer, this gentleman has uploaded solutions to all of my doubts and problems. Thank you for your service boss

[yourcasualdeveloper]

As always Dave Gray here at the exact time that I need him. I love you ❤❤❤❤❤❤

[ichiroutakashima]

I really needed this tutorial! Thank you so much!

[nwaguchima]

Dave is always the best. It just feels like you know how to talk to my brain, it's so easy to assimilate whatever you teach. Thank you so much, You are amazing!!!!

[arjunk]

Wonderfully covered the basics. Thanks alot.

[DanielAzubuine]

Nice tutorial.
How will I go about debouncing

[Pareshbpatel]

A very comprehensive tutorial on using react-hook-form with Zod Validation (TS) - Thanks, Dave

{2023-05-26}

[raymondmichael]

This should be seen in the zod documentation 😊🎉

❤❤❤❤❤
Greetings from Tanzania 🇹🇿

[doors]

My goodness Dave!! This is wonderful! 🔥
Also, it seems that some great improvements are on the Redux Toolkit pipeline.
Would love for you to cover those in due time.
Your RTK series is just phenomenal!
Have a great day 🚀

[mattburgess]

React Hook Form is a really valuable library. If you use it I strongly recommend looking deeply into some video series.

It is capable of extremely powerful form features that massively slash the code required for things like validation, dependant states, or disabling forms.

[eleah]

Hello Professor, Nice to see you again.

[MsAnnieHuang]

Great work Dave, still very valid after 1 year of creation.

[magnuserikkeenrobot]

Couldn't you just use TypeScripts Omit<> to omit the id?

[codingssprint]

react tutorial playlist one of best playlist 😊

[germanmartirosyan]

Great for REST API! Thank you for examples and overview for Zod. We use graphql and it's shema to buld types. Works pretty the same, but I dont know if i could build validation or transform data on top of it.

[maximilianomoyano]

Is it a bit late to ask which color theme are you using on this video? Looks great

[ahmedjaber]

Thank you for sharing your knowledge to help us. ❤ There is a high request from your community to explain the Zustand library. I think the best way to learn it is to convert a project that has already been made with Redux Toolkit to Zustand. This may be the best way to understand it

[tigerseely]

Hi Dave, thanks again for the tutorial, I have a question: for the frontend prjects that are using router, and most of them are using react-router, especially the new version after v6.4, the form functionality has been put into the action of react-router, is it still necessary to learn any other form library?

[hikingaroundtheglobe]

i just liked the video from two differents accounts so you can get 200 likes, you are awesome man..

[ggff]

Hey Dave, any idea on how can we fetch multiple url parameters in nextjs 13.4? like my website url has . I want it to be client side and wanna get the <uid> and <token> to request the server and verify the email. I am confused on how nextjs's file based routing will support this?