I like how you always state the problem before introducing the solution. I've probably never said this on any channel, but you're the best teacher I've seen so far on KZread.

from defining the problem to providing the solution with react-hook form and optimizing it with zod, you did a great job explaining it

Fantastic video Cosden. Good depth of information covered and I particularly like how you explain how you'd take the example beyond tutorial-ware into something you'd need for a production application - stuff like interacting async with a real backend and using Zod over your own validation. I am looking forward to that Zod video you mentioned!

Hands-off, that's the best tutorial on react hook forms and zod. I was struggling with other tutorials before I have found yours. Step by step, explaining all the details, and make it click for us the viewers. Please keep going. I have already subscribed.

Freakingbrilliant man! This is what I needed for my app. 30 minutes of concise explanations of everything important, not to long, not to short.

As someone who has watched most of the rhf and zod tutorials on youtube and has found them difficult- this was really good - I am excited to hear about your zod tutorial. A bit of feedback is to install all the dependencies at the start of your tutorial .

Big thanks for the fantastic video! 🚀 Your clear explanations and practical examples made complex concepts feel so much more approachable. Looking forward to diving deeper into these topics with your guidance. Keep up the great work! 🥰

I can't thank you enough. Inwas working on a form and wanted to learn zod. Boom, I found you have both react-hook-form and zod😂. Your channel has helped me polish on my development. You structure your tutorials in a way even my grandma can understand. I like the step by step guide, that way i know why this or that happened.

Man, your content is absolutely amazing 👏

This is amazingly easy to understand. Great video 💪🏻

Simplicity at its peak 🙌, thanks man

Great content man! So precise and clearly stated! Hats off!

Thanks for the simple explanation.😇

Can't appreciate more! You always value your viewers' time. 👍👍

Superb! Thanks for the video! You make it so easy to understand react-hook-form and zod in less than 30min.

Perfect overview and clearly demonstrated! Thanks for the education and for keeping it easy to follow.

This has to be the best and most complete tutorial on implementing forms in React, using React-Hook-Form, Zod, and Typescript! - So clearly presented. Thank you very muck, Darius {2024-05-28}, {2024-06-02}

Glad I found this channel. Great tutorial.

Amazing tutorial, enjoyed every second of it.

This is an amazing tutorial. Instantly subscribed.

Fantastic video. You explained everything in detail. Thank you so much

This is just so great, thank you for explaining this so easily

This has been the best tutorial for React Hook Form and Zod in 2024. Thank you for explaining the problem and the solution well. I'm really excited to try this in our project! This is my first time on your channel and I will make sure to check out your other videos. :)

the concept clarity I recieved about why React hook form is even needed ,thank you so much

Very very very very very informative and clear explanations. This is what I exactly looking for. I am looking forward for the Zod tutorial also. Many thanks

Thanks for such easy and comprehensive explanation.

Amazingly well explained. Thanks Cosden, one more subscriber for you!

Watched this video without forwarding it but felt like it's ended in 5mins even though its 28min video, Crisp and Clear

Thanks dear. Finally I understand How Zod work with react hook form. Stay blessed.

Love you brother. Awesome video with awesome explanation ❤

Thank you Cosden for a clear and concise video on React Hook Form. I need it to build a contact form for my next.js portfolio. Your video explains better than the React Hook Form documentation. Like other who commented here, I am also waiting for your video on Zod validation. :)

Very helpful especially using zod with react-hook-form. Great work🍷

Thank you! Very clear explanation and guide step-by-step from simple form to more complicated. 💪🙏💗

very straight forward presentation of useful info. nice work

good stuff! thank for your time sharing this. here a new follower from Costa Rica 🏖

Yeh have to agree with the comments below. Your style of explanation, the clarity and pace is very good to watch. Glad i found this channel. Keep up the good work!

Really good video, quick and easy!

this is very useful and the explanation is great!

Amazing tutorial, thanks for sharing with us.

i just wanted to say thank you for this great video, it even has typescript! thanks you so much

thanks for sharing! I love your tutorial!

Thank you so much. Great explaination.

Good Job Cosden, I just happen to be working on a very important project and this is just what i needed for my forms

Cosden is the king of juniors !! what a guy

I love your content! You provide great tips! I definitely prefer your videos over your shorts

@cosdensolutions

4 ай бұрын

would you mind telling me why? I'm curious :D

@chadkopelowitz5642

4 ай бұрын

@@cosdensolutions you go into greater detail in your videos and you point out caveats and potential errors better. Don't get me wrong, your shorts are still great 🙂

@leonardmbibi8013

6 күн бұрын

@@cosdensolutions To be very honest with you I don't like the shorts; but I like your video tutorials

Thank you so much, great information and great video with great teacher

Fantastic video Cosden.

Highest quality react content on KZread!

Another great tutorial thanks bro

Great explanation! Thanks a lot❤

Great guide, Thanks!

Thanks for making such useful videos really greaful ❤

Very informative great work

Very useful video, thank you so much.

I've been writing hooks that individually manage fields and then respond back to the parent through a callback that they specify. It looks better than the example, but the amount of different options the components have is insane. Looking forward to this alternative solution.

U are the best, fun to learn from you

Thank you for this very nice video; I would definitely use it when I have a big form in React; just wanted to mention that Angular have this kind of form handling for years;

You are creating great content, the best for react🙌🙌 I was expecting to see how to use controls as well

Fantastic video on React Hook Form

This is awesome, I don't have to create those validation features from scratch now

Thank you. A new subscriber

nice method to elaborate everything

awesome tutorial!

this is so useful!! thanks!

Great video!

Amazing explanation! Very simply and clearly! I'm totally be subscribed for your channel! Which will be the next topic? I think, it's will be very helpful if you're making a video for professional setup about husky/eslint/prettier and why not some basic CI/CD? Thank you in advance!

U made my work simple future master peace react instructor

Damn, you read my mind!! 🔥

The Messiah of react developers ❤️

Great job 👏 👍

great intro thx !!

Hi, i've seen a lot of coding content from a lot of other youtubers but you bro you're just brilliant. Would be great if you provide us with initial code, not just final version

unrelated but when he said "this form works" at 1:59 with the kubrick stare on his face, i felt it in my soul

you are the best !!

Nice one. I actually hated it until you got to zod. I like to validate my forms on the server though.

@cosdensolutions

4 ай бұрын

client side validation has its uses, it's usually better UX to provide instant feedback as the user types

@gustavoh5143

4 ай бұрын

but you have to validate on both sides

easy to follow!

Thank you very much sir

Make video on writing test cases for jest coverage report

@nomansyt

4 ай бұрын

Male video?

@basavarajeshkoni9739

4 ай бұрын

@@nomansyt edited

Awesome!!!

Thank you!

Great classe! Thanks a lot

It looks simple for straight use cases like this but getting complicated when I have a huge form with form fields spread across multiple different components. It will be great if you can make a content covering those edge cases, Thanks.

great job

good job!

good job from ethiopia

Great video! Thanks for explaining the concepts so clearly! What if the validation of one field depends on the value of another? In the video's example, how can you achieve a validation function that prevents the user from submitting a password that is contained in the email?

Awsome😍

Cool! Please do a video on useWatch, watch, and field array next. Thank you!

You are the best

Great video! I wonder why does it say string must contain... instead of saying the field's name like in your case password field , I'm also so excited for that zod tutorial and please cover some more advanced features not just basics and use it with react hook form

thanks man

Thanks!

Hello sir, could you tell us what is the name of extension that suggest you the code in background? For example, at 7:48, when you start writing SubmitHandler, I see that the structure is already written "in the shadow" :D

My guy, come to Greece. Nice video too.

Thanks for the video. 1 suggestion that next time you do a code tutorial video, can you also show how to write test for them? That would be so much better

@cosdensolutions

4 ай бұрын

I will eventually make React testing videos on most things

@quanmuito6156

4 ай бұрын

Keep up the good work man 💪

Nice video explaining, I am still wondering whether I should use formik or react hook form. Even though I already have worked with two of them in my job. But when it comes to personal project, I still do not know how to decide.

@cosdensolutions

4 ай бұрын

I'd recommend RHF, it's a bit more performant

hi, which vs code plugin you are using for copilot(code suggestion you are getting which writing the code).

Great video 🎉thank you so much! Can you please make a video how to edit and customize the error messages of the zod validation with the react hook form resolver? Or shortly how to do that? I would really love to support you with some coffee ☕️ if you provide us a link ✌🏼 all love and support from berlin

@Movoid12

4 ай бұрын

Is that the right way? const schema = z.object({ name: z.string().nonempty({ message: 'Name is required' }), age: z.number().min(10, { message: 'You must be at least 10 years old' }), });

@faizanahmed9304

4 ай бұрын

Thank you!

@cosdensolutions

4 ай бұрын

for a lot of them you can pass an object with message as a property like you did. For the required validation, I'd just do `.min(1, { message: "Required" })`

@Movoid12

4 ай бұрын

@@cosdensolutions thank you again! It works 😎

Great video! What about onChange validations and if i wanted to manipulate some data when the value of a field changes

@cosdensolutions

4 ай бұрын

so RHF automatically validates fields onChange for you, as you can see my errors appear/disappear as I type. If you want to do more than that, you can actually access `onChange` and `onBlur` properties of RHF for a specific field and implement your own logic there. Check out the RHF docs for that

great tutorial btw can i ask the name of the font that you are using?