React Hook Form - Complete Tutorial (with Zod)

Поділитися
Вставка
  • Опубліковано 22 гру 2024

КОМЕНТАРІ •

  • @cosdensolutions
    @cosdensolutions  4 місяці тому +10

    Hope you enjoyed the video! I also have a really cool and unique course that will teach you way more than this video. You'll learn how to build an actual complex project with React. It's called "Project React" and you can find it at cosden.solutions/project-react. Also, I have a free weekly newsletter called "Import React" with tutorials, news, and cool stuff about React! You can sign up at cosden.solutions/newsletter?s=ytc

  • @oluwasegunadeniyi7673
    @oluwasegunadeniyi7673 8 місяців тому +55

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

    • @gauthamvijayan
      @gauthamvijayan 3 місяці тому +1

      What a superb way to explain!

    • @priteshonYT
      @priteshonYT 3 місяці тому +2

      @@gauthamvijayan yes ! he said it at starting why we even need it before starting it ...

  • @EnesKab
    @EnesKab 9 місяців тому +19

    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.

  • @sabriele
    @sabriele 6 місяців тому +10

    00:00 Introduction
    00:48 Basic form walkthrough
    02:10 Why use React Hook Form (RHF)?
    04:26 Implementing the form with RHF
    05:21 Setting field types
    06:05 Connecting the form to RHF
    07:25 Submitting the form
    10:01 Validating fields using RHF
    12:51 Setting validation messages
    17:12 Handling asynchronous submissions
    19:23 Handling errors
    22:19 Setting default field values
    23:21 Validating fields using Zod
    27:53 Outro

  • @franklinmayoyo
    @franklinmayoyo 9 місяців тому +4

    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.

  • @dub161
    @dub161 5 місяців тому +7

    I have ADHD, still I managed to sit thru entire tutorial without any stop. Really solid delivery thanks a ton!

  • @eshw23
    @eshw23 10 місяців тому +2

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

  • @ilyasassainov2717
    @ilyasassainov2717 Місяць тому

    After 6 years of struggling with forms, we finally have something useful! Thanks for the in-depth tutorial!

  • @brentleemans
    @brentleemans Місяць тому

    One of the best tutorials I've ever watched. To the point and clear. Thank you! Great job!

  • @KiflomBerihu
    @KiflomBerihu Місяць тому +1

    I have seen many of your tutorials this is by far the best. chaw chaw

  • @sckoobs
    @sckoobs 11 місяців тому +7

    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!

  • @shubhamshah9358
    @shubhamshah9358 22 дні тому

    Thankyou for finally making me understand react-hook-forms. I was afraid i might not understand it but now i feel so confident. Thankyousomuch!

  • @akashkadam2741
    @akashkadam2741 6 місяців тому +1

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

  • @VijayKogali
    @VijayKogali 9 місяців тому +1

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

  • @adamyasharma_0135
    @adamyasharma_0135 8 місяців тому

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

  • @Pareshbpatel
    @Pareshbpatel 6 місяців тому

    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}, {2024-07-03/24/29}

  • @akashddeepchitransh4537
    @akashddeepchitransh4537 8 місяців тому

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

  • @agilustre
    @agilustre 7 місяців тому

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

  • @alexanderkrysiuk590
    @alexanderkrysiuk590 2 місяці тому

    Thank You so much! I speeded 3 days trying to figure out how to do ir properly. This explanation is great!

  • @bengardiner5880
    @bengardiner5880 7 місяців тому

    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!

  • @jitujahagirdar613
    @jitujahagirdar613 3 місяці тому +2

    I like your technical video bro..!
    That's make seance to me easy understand technical things from surface level to underhood level how technical things work.!
    I really appreciate your video.

  • @shah6138
    @shah6138 11 місяців тому +1

    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 .

  • @mario_luigie4593
    @mario_luigie4593 6 місяців тому

    this is probably the best rhf lesson i have ever seen ! Thank you so much!

  • @chadkopelowitz5642
    @chadkopelowitz5642 11 місяців тому +3

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

    • @cosdensolutions
      @cosdensolutions  11 місяців тому +1

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

    • @chadkopelowitz5642
      @chadkopelowitz5642 11 місяців тому +1

      @@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
      @leonardmbibi8013 6 місяців тому

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

  • @XinWongDigital
    @XinWongDigital 18 годин тому

    lovely session . thank you. for all the young engineers out there, i wud still recommend you to try to implement your own form handling without any tools/libs. Learn from your mistakes and rebuild it with your own version of improvements. Build it again and again until you are happy with the final results. THEN, start using tools such as react foom and zod. You will be amazed how much you have accomplished and in some cases, you may even realize that the tools are doing exactly what you have built. People may say to you that you are reinventing the wheels. You are not. You are learning and setting up solid fundamental skills for your career which is what nowadays young people are lacking.

  • @senseiKakashi07
    @senseiKakashi07 10 місяців тому +1

    Simplicity at its peak 🙌, thanks man

  • @MrTaekbeen
    @MrTaekbeen 9 місяців тому

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

  • @jerrydsta1056
    @jerrydsta1056 6 місяців тому

    man, you are the best. you describe complicated things in such a simple way.. good job!!

  • @mdkawsarislamyeasin4040
    @mdkawsarislamyeasin4040 5 місяців тому

    Amazing video, I have been using react-hook-from front for the last few months but I have learnt a lot from this again.
    Thank you so much.

  • @luyvannda
    @luyvannda 9 місяців тому

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

  • @guitarcrax127
    @guitarcrax127 11 місяців тому

    Highest quality react content on UA-cam!

  • @aiwithhamzanaeem
    @aiwithhamzanaeem 9 місяців тому

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

  • @nmdpa3
    @nmdpa3 7 місяців тому

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

  • @TechSpot56
    @TechSpot56 5 місяців тому

    Thanks cosden, for making react hook form so much easy for me.

  • @Loretaaaaa
    @Loretaaaaa 11 місяців тому +1

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

  • @ptolemyhenson6838
    @ptolemyhenson6838 11 місяців тому +1

    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.

  • @rickyrozario1577
    @rickyrozario1577 5 місяців тому

    Subscribed. What a easy way to explain! Loved the video. Keep the great vids coming!

  • @ankushjain358
    @ankushjain358 6 місяців тому

    What a video, uncovers a lot of hidden things. Thanks man!

  • @joaomarcelofurtadoromero8277
    @joaomarcelofurtadoromero8277 11 місяців тому

    Cosden is the king of juniors !! what a guy

  • @syuo5051
    @syuo5051 6 місяців тому

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

  • @p.r.s8675
    @p.r.s8675 4 місяці тому

    Great tutorial so concise and information dense yet so easy to follow. keep up the good work.

  • @visuals420
    @visuals420 4 місяці тому +1

    best tutorial for react hooks. thanks

  • @carloautor
    @carloautor 10 місяців тому

    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

  • @shuaibuusman8784
    @shuaibuusman8784 11 місяців тому +7

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

  • @JessperTV
    @JessperTV 9 місяців тому +2

    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

  • @mzamotembe5200
    @mzamotembe5200 11 місяців тому +1

    Man, your content is absolutely amazing 👏

  • @mortezarostami3287
    @mortezarostami3287 4 місяці тому

    I'm learning a lot from your videos man, Thanks a lot for you work.👍👍

  • @ABHISHEK_RANJAN01
    @ABHISHEK_RANJAN01 6 місяців тому +1

    Thanks for the simple explanation.😇

  • @EricaDurance-f5l
    @EricaDurance-f5l 6 місяців тому

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

  • @anhduy-ii9si
    @anhduy-ii9si 2 місяці тому

    Fantastic video ! Easy to follow and useful . Thanks

  • @annasergeeva4182
    @annasergeeva4182 3 місяці тому

    Fabulous. Very simple and clear. Thank you!

  • @tunde6159
    @tunde6159 7 місяців тому

    Glad I found this channel. Great tutorial.

  • @Ranjeetvishwakarma-72
    @Ranjeetvishwakarma-72 3 місяці тому

    Fully digested content. Love it 😍😍

  • @SavanThongvanh
    @SavanThongvanh 9 місяців тому

    very straight forward presentation of useful info. nice work

  • @shashiKPD
    @shashiKPD 5 місяців тому

    WOW!! Just fantastic. Excellent explanation. Thank you.

  • @bhavyajain638
    @bhavyajain638 6 місяців тому

    Amazing tutorial, enjoyed every second of it.

  • @ToiaGeddes
    @ToiaGeddes 8 місяців тому

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

  • @emptytank604
    @emptytank604 8 місяців тому

    This is an amazing tutorial. Instantly subscribed.

  • @master-ik9ro
    @master-ik9ro 7 місяців тому

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

  • @romaghorjomeladze439
    @romaghorjomeladze439 9 місяців тому

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

  • @MrAlao675
    @MrAlao675 11 місяців тому +2

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

    • @cosdensolutions
      @cosdensolutions  11 місяців тому +2

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

    • @gustavoh5143
      @gustavoh5143 11 місяців тому

      but you have to validate on both sides

  • @Kco86
    @Kco86 7 місяців тому

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

  • @SimeonIeroteev
    @SimeonIeroteev 10 місяців тому

    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!

  • @noahnymous9919
    @noahnymous9919 10 місяців тому

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

  • @oceanvvl
    @oceanvvl 11 місяців тому

    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;

  • @adarshmodanwal8436
    @adarshmodanwal8436 11 місяців тому

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

  • @govindkarthikeyan
    @govindkarthikeyan 8 місяців тому

    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.

  • @user-ce9yr3my4g
    @user-ce9yr3my4g 9 місяців тому

    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

  • @sviatoslav8776
    @sviatoslav8776 10 місяців тому

    Thanks for such easy and comprehensive explanation.

  • @geforcesong
    @geforcesong 10 місяців тому

    Fantastic video Cosden.

  • @usamatahir6413
    @usamatahir6413 11 місяців тому

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

  • @mohammedsufiyan5164
    @mohammedsufiyan5164 10 місяців тому

    Love you brother. Awesome video with awesome explanation ❤

  • @robindrasingha5408
    @robindrasingha5408 4 місяці тому

    wow... you made it so easy to understand .. keep it up ..

  • @Earth_Elegance_
    @Earth_Elegance_ 8 місяців тому

    this is very useful and the explanation is great!

  • @ryostyles9904
    @ryostyles9904 11 місяців тому

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

  • @nemeziz_prime
    @nemeziz_prime 11 місяців тому

    This is amazingly easy to understand. Great video 💪🏻

  • @gouravchouhan1790
    @gouravchouhan1790 11 місяців тому

    The Messiah of react developers ❤️

  • @Ksson96
    @Ksson96 10 місяців тому

    Really good video, quick and easy!

  • @gianlucasoremcasualzate6421
    @gianlucasoremcasualzate6421 11 місяців тому

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

  • @רוןממן-ד6ז
    @רוןממן-ד6ז 3 місяці тому

    you are a very good teacher! can you share the cool extenstions that were used here? those who automate and fillin the code for you

  • @d3vwannabe
    @d3vwannabe 9 місяців тому

    Great video! Could you also go over how react-hook-form saves # of rerenders? I find this fascinating and don't quiet understand how. I made some general purpose hooks and they cause a lot of unnecessary rerenders due to some extra states used for niche cases. I would like to prevent those rerenders if a component using the hook is not using those states.
    It seems react-hook-form does exactly that, where if you don't watch the error, it will not rerender when user types.

    • @cosdensolutions
      @cosdensolutions  9 місяців тому

      RHF uses uncontrolled components behind the scenes, meaning that state doesn't update as it updates, so that's where the performance is coming from!

  • @nsynsynsy
    @nsynsynsy 11 місяців тому

    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?

  • @R3nxt
    @R3nxt Місяць тому

    Really a great video!

  • @valostudent6074
    @valostudent6074 4 місяці тому

    best teacher

  • @generalknowledgeandhistory
    @generalknowledgeandhistory 9 місяців тому

    Very informative great work

  • @mohcinekhettou7619
    @mohcinekhettou7619 6 місяців тому

    well explained tutorial . please keep putting sush great tutorials

  • @kapilcreation961
    @kapilcreation961 Місяць тому

    best video ever

  • @Dan-mc3eo
    @Dan-mc3eo 2 місяці тому

    Which extension do you use for your typescript type autocompletion or type intellisence?

  • @removed107
    @removed107 10 місяців тому

    Amazing tutorial, thanks for sharing with us.

  • @emrans5604
    @emrans5604 10 місяців тому

    Fantastic video on React Hook Form

  • @nyousefi-i6r
    @nyousefi-i6r 12 днів тому

    I love your content!

  • @alexanderrossi7490
    @alexanderrossi7490 11 місяців тому +1

    Another great tutorial thanks bro

  • @ardianhotii
    @ardianhotii 10 місяців тому

    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

  • @huntergiles
    @huntergiles 4 місяці тому

    Fantastic explanation

  • @wassimabdennadher2715
    @wassimabdennadher2715 3 місяці тому

    Good job , same thing using Formik and Yup ! :)

  • @hichamamroussi9087
    @hichamamroussi9087 6 місяців тому

    How to make an input required with Zod ? when you removed the React Hook Form there was no more required validation rule

  • @toonice555
    @toonice555 2 місяці тому

    Great video!

  • @saifulajomkhan4577
    @saifulajomkhan4577 2 місяці тому

    Great video. 🎉

  • @basavarajeshkoni9739
    @basavarajeshkoni9739 11 місяців тому +25

    Make video on writing test cases for jest coverage report

  • @MohammadBarghamadii
    @MohammadBarghamadii 7 місяців тому

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