What we are currently doing is creating form engine which will help the entire frontend team to extend the forms ...and conditionally display form inputs based on the user selection... This makes the forms rendering mechanism/engine open for extension, but closed for modification (open-closed) Under the hood we use formik and for some new forms - react-hook-form.
Rhf is a lot more performant, formik rerenders entire form/page on change of any field, rhf does not. Also i recommend zod instead, imo it's much nicer
I think it's better to start the new form with useForm instead of updating the old code code piece by piece. It makes more confusing to all code mixed up.
EXTREMELY useful and well explained. Thank you for this tutorial! I do have a question that I can't seem to find an answer to 🙂 Let's say I want to have a second component containing the regions of the selected country dynamically fetched upon country selection. How would I go about doing that? MERCI!
So sorry Paul I've been off RUclips for a little while! I hope you figured this out but you want to look into using one `useController` hook for each select component.
Hi Ian, thank for this video..all your videos are insightful. I have a quick question that I have yet to figure out, when defining handleSelectChange what is your advice for having multiple react-select inputs? Thanks.
I think that this is just common practice with objects as parameters, so that the original object doesn't get mutated (although it doesn't stop nested objects from being mutated). I also know that Angular and, in some contexts, React, respond differently if the object is new, even if the properties of an old object had changed, except for contexts which use deep equality.
React hook form has wasted so much time for my team, we hate it. Debugging it has been terrible, as there are often no error messages in the console. Do you have any suggestions for how to deal with it when there are no error messages? When it happens, it is usually somewhere inside of handleSubmit (the code doesn't reach our submit function).
Hey yeah useForm returns a formState object which contains all the validation errors. Personally I use zod for validation with zod-resolver. As long as I pass each possible error to an error message in the UI, I know I’m covered.
The code won’t reach your submit function if it fails validation so make sure you handle those errors from formState and you shouldn’t have any more issues.
@@IanLenehan Thank you for taking the time to respond. Is there a point in your video where you handle formState errors? I'm not totally clear on how to go about that. Is there a way I can log it to the console?
Have a look here - you'll see how to get formState, which is an object, Inside formState is another object that contains all your errors react-hook-form.com/docs/useform/formstate. You can just console.log(formState.errors) I don't know how your UI is set up so I can't tell you how to handle errors, but it might be something like this {formState.errors.firstName?.message} Or RHF have their own component you can use, here is how to use it react-hook-form.com/docs/useformstate/errormessage
I tried implementing this in a form that was built with two separate components, a simple form and a grid form, how do I go about using react hook form for that? 😊
@@neogeo8267 That's kind of you - I have a reasonable mic but I don't know a lot about audio balancing so I'm sure there's a good bit I could learn about that
In Angular, there are ControlValueAccessor components that are very tedious to navigate, have very bad TypeScript support (thanks 'any'), FormGroups/AbstractControls don't typecast well at all inside of the templates, and have very little to gain despite their complexity. RHF seems to cover all of the same bases, but being far more intuitive and with far less code.
A bit difficult to follow with so many technical keywords, information overload and a bit rambly. I could see this being accessible only to veterans of React and forms. But as someone who uses React and forms irregularly, this tutorial is not beginner-friendly.
Keeping your video in a proper flow is not enough, When you are running ahead without the self-awareness or caring enough - That your viewers will be in sync. I'm inviting you to watch yourself and see how many times you said things (Such as: "I delete this", "we'll get rid of that") before or during the action itself. The meaning of such an action is that the viewer say: "wait, what? what did you just delete?" (Again, and again, and again.... It's exhausting, annoying, and quite unbearable.) It is ok... Teaching is a skill. Not everyone is born with it. I'm sure you'll get better once you'll be more aware and pay more attention.. Transmitting your knowledge is always welcome, But without being mindful enough for the people who receive this transmission - It will just fade away and will end up with unprofessionally. Thanks anyway... Good luck!
This is a bad tutorial. First of all, you are all over the place, which makes it difficult to follow and understand what's happening. And second; you are merely implementing RHF into a pre-existing code with already written functions - we, the viewers, don't do that. We build the code from ground up, so we can clearly understand how things are interconnected. Keep that in mind next time.
I'm sure constructive criticism is welcome... Opening your statement with "This is a bad tutorial" is harsh. I have a question for you Mr. Burian. Have you ever published a tutorial?
Thanks Paul - gotta love it when random people, who are free to watch and not watch whatever they want, tell you your work is bad and to do it their way next time. Otherwise I very much appreciate constructive criticism!
thanks for this clear tutorial, I am facing problem with I have validation for specific field but i want the error show when user type wrong thing if it write and delete it or click on submit will not show the error, how can i reach that? thanks a head @IanLenehan
Super succinct, no bloat. Easy explanation. Love it dude.
Love the video, we have now started refactoring a lot of our forms using react hook form.
Thanks! Yeah it's great once you start clearing through those complex forms
Very nice walk-through. Cheers. 💪
What we are currently doing is creating form engine which will help the entire frontend team to extend the forms ...and conditionally display form inputs based on the user selection...
This makes the forms rendering mechanism/engine open for extension, but closed for modification (open-closed)
Under the hood we use formik and for some new forms - react-hook-form.
The use of the React Hook Form library correctly, so well demonstrated. Thanks.
{2023-01-30}
I like the way of Formik works with Yup, you can build validation schemas and another things easier.
But rhf is cool too.
Rhf is a lot more performant, formik rerenders entire form/page on change of any field, rhf does not. Also i recommend zod instead, imo it's much nicer
rhf can be integrated with yup too though :-)
Hi Ian thanks for this high quality content! looking forward to more of these vids
I think it's better to start the new form with useForm instead of updating the old code code piece by piece. It makes more confusing to all code mixed up.
That theme is punishing to the eye 🥹
Great video! How do i manage multiple react-select inputs and also how to create a reusable react-select component along with react-hook-form
Thx a lot Ian. very good and well informing tutorial
You might need to see Quill Forms as well. Pretty cool form.
wow , really helpful , especially for someone new to react, thxxxx
You are a life saver...thank you so much!
Great explanation, thank you
EXTREMELY useful and well explained. Thank you for this tutorial!
I do have a question that I can't seem to find an answer to 🙂
Let's say I want to have a second component containing the regions of the selected country dynamically fetched upon country selection.
How would I go about doing that?
MERCI!
So sorry Paul I've been off RUclips for a little while! I hope you figured this out but you want to look into using one `useController` hook for each select component.
I would like an example of how to declare useController for each select component
@@IanLenehan
Yup IS actively maintained, it just got it's v1 release (as of March 2023)
My mistake!
Hi Ian, thank for this video..all your videos are insightful.
I have a quick question that I have yet to figure out, when defining handleSelectChange what is your advice for having multiple react-select inputs?
Thanks.
Great tutorial. Thank you
what did you type to grab that console.log like that @9:28 ?
22 minutes literally worth it.
Thanks Sam!
Just curious why did you pass the the user object prop putting it in a spread object instead of
I think that this is just common practice with objects as parameters, so that the original object doesn't get mutated (although it doesn't stop nested objects from being mutated).
I also know that Angular and, in some contexts, React, respond differently if the object is new, even if the properties of an old object had changed, except for contexts which use deep equality.
Exactly why I use Mantine. Incorporates RHF
Great video Ian, subscribed 🤩
Thanks Kishore!
@@IanLenehan 🙌🙌🙏
Awesome. Thanks!
Is there any repo that you could provide with, please?
Hi Lan
I need your assistance to optimize react with Context api hook.
How does he get those nice console.log()?
thank you
great video! only nit pick I have it's that you're not using typescript by default
I love typescript but I think leaving it out helps focus the video a bit more on react hook form itself
Awesome turtorial
thanks man!
React hook form has wasted so much time for my team, we hate it. Debugging it has been terrible, as there are often no error messages in the console. Do you have any suggestions for how to deal with it when there are no error messages? When it happens, it is usually somewhere inside of handleSubmit (the code doesn't reach our submit function).
Hey yeah useForm returns a formState object which contains all the validation errors. Personally I use zod for validation with zod-resolver. As long as I pass each possible error to an error message in the UI, I know I’m covered.
The code won’t reach your submit function if it fails validation so make sure you handle those errors from formState and you shouldn’t have any more issues.
@@IanLenehan Thank you for taking the time to respond. Is there a point in your video where you handle formState errors? I'm not totally clear on how to go about that. Is there a way I can log it to the console?
Have a look here - you'll see how to get formState, which is an object, Inside formState is another object that contains all your errors react-hook-form.com/docs/useform/formstate. You can just console.log(formState.errors)
I don't know how your UI is set up so I can't tell you how to handle errors, but it might be something like this
{formState.errors.firstName?.message}
Or RHF have their own component you can use, here is how to use it react-hook-form.com/docs/useformstate/errormessage
Which Extension are you using for console logging
Turbo console log. It's awesome!
I tried implementing this in a form that was built with two separate components, a simple form and a grid form, how do I go about using react hook form for that? 😊
Is it required to wrap the input output fields into form?
That's brilliant. I'm new with React and I don't get where the Select component comes from.
Ah sorry if I was unclear! I imported Select from `react-select` which is a third party library
thanks man
What editor is he using?
Nice work!
Thank you!
Very nice video, I understood every bit of it.
Now I have a question, can we use react-hook-forms with react-native out of the box?
Thanks Chupito! Yeah for sure, I haven’t tried but I see no reason why it wouldn’t work!
documentation => 4:40
methods => 5:14
Good
5:00 Install react hook form
Plz explore all it's features like setValue watch isDirty and others
Maybe I can look more in depth in another video!
@@IanLenehan so waiting of it ..
zod is great but the error message is just sucks
You can supply your own error messages.
where is the link to code's git repo?
Sorry Moses I forgot to do that for this video!
good video - please make more but first buy a good mic and balance the audio. Thanks
I'm happy with how it sounds thanks :-)
@@IanLenehan sure thing. I'm sure your viewers would chip in if you change your mind. Count me in
@@neogeo8267 That's kind of you - I have a reasonable mic but I don't know a lot about audio balancing so I'm sure there's a good bit I could learn about that
Formik vs react-hook-forms
RHF > Formik
god vue and angular model bindings for forms is soooo much cleaner than react, even jQuery or native javascript has much cleaner code than react
In Angular, there are ControlValueAccessor components that are very tedious to navigate, have very bad TypeScript support (thanks 'any'), FormGroups/AbstractControls don't typecast well at all inside of the templates, and have very little to gain despite their complexity. RHF seems to cover all of the same bases, but being far more intuitive and with far less code.
A bit difficult to follow with so many technical keywords, information overload and a bit rambly. I could see this being accessible only to veterans of React and forms. But as someone who uses React and forms irregularly, this tutorial is not beginner-friendly.
Thanks for the feedback Percy!
For building forms,you integrate unnecessary features into your app which makes the app more bulky and under-performing🤣
First 😎
Just barely beat everyone else! 😉
@@IanLenehan Dan is your fan #1:)
@@vLototskyy does that make you my number two? 😂
Keeping your video in a proper flow is not enough,
When you are running ahead without the self-awareness or caring enough -
That your viewers will be in sync.
I'm inviting you to watch yourself and see how many times you said things
(Such as: "I delete this", "we'll get rid of that") before or during the action itself.
The meaning of such an action is that the viewer say: "wait, what? what did you just delete?"
(Again, and again, and again.... It's exhausting, annoying, and quite unbearable.)
It is ok... Teaching is a skill. Not everyone is born with it.
I'm sure you'll get better once you'll be more aware and pay more attention..
Transmitting your knowledge is always welcome,
But without being mindful enough for the people who receive this transmission -
It will just fade away and will end up with unprofessionally.
Thanks anyway...
Good luck!
This is a bad tutorial.
First of all, you are all over the place, which makes it difficult to follow and understand what's happening.
And second; you are merely implementing RHF into a pre-existing code with already written functions - we, the viewers, don't do that. We build the code from ground up, so we can clearly understand how things are interconnected.
Keep that in mind next time.
I'm sure constructive criticism is welcome... Opening your statement with "This is a bad tutorial" is harsh. I have a question for you Mr. Burian. Have you ever published a tutorial?
Thanks Paul - gotta love it when random people, who are free to watch and not watch whatever they want, tell you your work is bad and to do it their way next time. Otherwise I very much appreciate constructive criticism!
thanks for this clear tutorial, I am facing problem with I have validation for specific field but i want the error show when user type wrong thing if it write and delete it or click on submit will not show the error, how can i reach that? thanks a head @IanLenehan