React Hook Form - Get Started

[@VaurionX]

Great tutorial. There is so much functionality within this library that I keep discovering!

[@bluebill1049]

Awesome to hear!

[@forsh2966]

what a gigachad, i love it so much! handle every basic usecase

[@mpv756]

Great video. Was taking a Udemy class and they used redux form. I got tired of trying to do some stuff with it. So I decided to find a library that may be easier\better to use. Found React Hook Form and going to give it a whirl. Thanks for the great intro

[@abdelrahmanelshershaby3815]

thanks Mr. guru for this great tut, it's just straight forward ❤

[@bluebill1049]

Awesome!

[@amitkaktwan]

loved the way you describe things here.

[@cristian_albornoz]

goood, gracias por esta gran herramienta que nos facilita a la hora de codear, saludos desde Argentina..

[@thomascayne]

Wow. It took me 10 minutes to set up a form with this. Great library

[@bluebill1049]

Amazing to hear!

[@nnamtochukwu7266]

Used some similar libraries before. I have to say this is the best library for building form in react hands down. Great job 'Bruce lee'...lol. This is awesome.

[@bluebill1049]

haha, you are welcome!

[@roidadidou3445]

Awesome, thank you so much, very pedagogic style and very progressive for a beginner. :))))

[@bluebill1049]

Awesome to hear!

[@alfredgithinji3166]

Well elaborated.... Just what i need to get started!

[@Zeraltz]

Goddamn this is easy to do and easy to understand, thanks a lot!

[@Adarshabinash]

I found this playlist very difficult first...Then I realized that the orders are just randomized...else it's a great playlist

[@bluebill1049]

thanks, i have fixed it.

[@seyidtakele8158]

Thanks man , great tutorial . +1 for sound and video quality

[@degendev6633]

Great tutorial. Informative and concise! Keep up the good work man.

[@bluebill1049]

Thanks for the encouragement! I appreciate that.

[@JacquesOscarNdjebayiMatike]

Is this playlist still usefull with latest version on react hook form in june 2024 ?

[@jonathonbloomfield8991]

Thank you so much for this!

[@bluebill1049]

You are welcome.

[@joshuadadula-fy5kn]

Form is a critical component we can develop, i suggest we create our own component rather than trusting somebody's tool, so many alternative we can copy this feature

[@RBC2_]

Very useful !!

[@MarkBennettCa]

Great overview, thank you!

[@abdallahazme4757]

Thank you so much. What do you think of merge zod library with react hook form? or is the validation of register function is enough for most forms?

[@merictunc]

Brilliant!

[@bluebill1049]

Thank you!

[@eduardofagundesferreira8891]

Great video. How do I mask custom fields using the Controller? How do I pass the value to the UseForm using the value inside the field and not with state on the form?

[@mentoriii3475]

Thanks for the video Bill, do you have any video that explains how to preventDefault

[@ahsanijaz3319]

Amazing❤

[@ArtemSokolov2569]

Simply the best

[@aminda6862]

very good can you record complete video for composition of react hook form and material Ui 5 ?

[@bluebill1049]

thanks, I will get to it when I have more free time.

[@danwade0]

But what about if the user AutoCompletes the form? My example still toggle thru all the required fields even if filled in correctly.

[@denispepper2830]

awesome!

[@TheSathivel]

HI i have upgraded from 7.31.1 to 7.44 . but I got this error . ./node_modules/react-hook-form/dist/index.esm.mjs Can't import the named export 'Fragment' from non EcmaScript module (only default export is available) not sure how can fix this issue ?

[@zillboy]

This is awesome, thanks @Beier Luo

[@bluebill1049]

Welcome!

[@0jhivag]

If i want a form for a order,not a new user register,just to take the information entered in the form to make a order,so i use the register method or do i have another separate method?

[@菜花农农在北欧]

nice course ! can you do a useTable series?

[@JoshuaMusau]

I'm about to cry!

[@mastergrab44]

Hello, I am trying to get this to work with a dropdown menu but it doesn't seem to submit at all when the dropdown logic is in there. It works fine when I remove the dropdown though. (Strategy is mapping array into select options.) Would you know how to integrate that working with useForm? Thanks Bill!

[@ozankurucu6261]

Thanks!

[@bputra90]

This is an amazing library. I have my own component and i want to register using ref bcs my input is inside of a component. I found the solutions but they're using version of < 17.. When I check it, many of types on that solution is cannot be found on 17.. pls help making video of how to register using ref on typescript component.. Good work btw!!!

[@bluebill1049]

have you used this hook? react-hook-form.com/api/usecontroller

[@sharkofjoy]

I can't get past 30 seconds into this tutorial. I started a new React + vite app, added a single "form" component with two inputs, and as soon as I try to use the useForm hook, my console is full of errors. I have nothing else in this app, but it says I have invalid hook call and dispatcher is null. I have no way of understanding these errors in context or debugging them. I dunno what to do when I can't follow the very first step of the tutorial

[@kthalyn001]

Thank you so much for the video!

[@bluebill1049]

You are welcome.

[@cutipets8706]

Thanks for this amazing library, I just wondering how can i supply a message when pattern doesn't match?

[@bluebill1049]

refer to the doc: react-hook-form.com/api/useform/register search this term: Register with validation and error message (you should see a radio toggle) and the syntax is there

[@omnilothar]

what is the type of data from handlesubmit callback?

[@omnilothar]

nvm, its `SubmitHandler`

[@coffeefps]

Hi @Bill Luo, I'm a big fan of RHF. I have a question, this might be a noob question but on your other vid you mentioned the component will only render once, it won't render on submit if you don't use `errors`. My question is how did RHF know if the component uses/subscribes to `errors`?

[@bluebill1049]

Great question, if you are reading formState.errors then we know you are subscribed to that. formState has a proxy-like behavior to detect which formState is getting read.

[@furkangenc7869]

Cool

[@rjgupta2849]

source code?

[@navya6340]

Just I have simple form with 5 text fields With MUI 5 and React hook forms. I created a component for text field in MUI 5 . I want to write a controller for every field or in component level using useFormContext... Which is the best practice... Please give reply.... Please do sample code in sandbox .. Please...

[@blue_mustang_]

in my form the errors doesnt work in the first render, the it works , what am I doing wrong , I did exactly the as the video.Also it renders no matter if theres errors or not, I am stuck, don't know what's wrong

[@bluebill1049]

can you share a codesandbox and ask the question here? github.com/react-hook-form/react-hook-form/discussions i will take a look at it.

[@blue_mustang_]

@@bluebill1049 The form works just fine , I had a slider with two values that was kinda tricky to set.Too many hours in the pc burns me out hahaha, thanks for your help, best

[@blue_mustang_]

what I need to do is to show the value of the range slide in the screen while the user is selecting it, how can I achieve that?? I should access the register element right??,How can I acess the data of register before submit??

[@Tushar.Sharma]

What is the strategy to build something like this? The project I've recently joined has very large nested forms and whole monolithic state gets updated on each keystroke. The poor performance makes my eyes bleed. Sadly we aren't allowed to install anything other than pre-approved dependencies, so I was hoping to take some inspiration from this library to build something that could improve the performance. For now, I have split the parts of form using contexts to limit the state updates to one part.

[@bluebill1049]

I think the first issue to be resolved is to break down the huge state into sub form/compeont, and measure your performance alone the way as well.

[@bohdanbrokhovetskiy6445]

be water my friend

[@arieluser]

Thanks 🍻

[@MrNik0l0z]

Hey, thnx for the video. quick question, I am using typescript and when i try to put error message in p tag, it gives me an error of " Type 'string | FieldError | Merge | undefined' is not assignable to type 'ReactNode'. " Any advice how can i fix it? Thnx in advance

[@bluebill1049]

can you share a question at the GitHub discussion with a codesandbox? need to see the code before I can give you any fixes.

[@AbdelhameedG]

Thank you

[@RyanTipps]

Audio is a little hard to hear. Otherwise really helpful, thanks.

[@bluebill1049]

Thanks for the feedback, not a full-time youtube rather a library author and maintainer, but maybe I should consider buying a proper mic.

[@Evkayne]

thank you

[@bluebill1049]

You are welcome.

[@guderi8533]

ty ^^

[@sukhveerkardam4510]

Can you please tell that how can we add icon also password hide and show process

[@rsbah]

volume soooo low 😥 but ty for the tutorial

[@sahilbaig9860]

🙏🙏🙏🙏

[@catem8752]

The speaker should improve on his sound quality. You sound muffled and unenthusiastic. I've had to keep on replaying some parts because the words are getting lost in the muffled sound. For such a popular dev tool, the speaker should speak as though he actually wants to give the tutorial.