React Hook Form V7 with Material UI and Typescript Tutorial | Part 2 -- FormProvider

In this video, I will help in understanding FormProvider and useFormContext from React Hook Form and how to use it as well as implications.

Link to starter project to follow along:

React-Hook-Form Docs:

Timestamps
0:00 Intro
3:30 project start
5:30 formProvider page
9:06 mui Textfield
11:06 reactHookFormTextField component
12:20 useFormContext
16:36 FormProvider performance
17:20 memo HOC
21:15 UIKit integration
26:00 FormProvider
31:00 useFormContext

[TauwinKul]

Thank you for the RHF series. Your videos are super informative and have helped me a lot. You also have a very pleasant way of imparting knowledge.

[mohdsahil]

Excellent Video I have ever watched!
Please make series on Material-UI Version-5

[rammehar]

Great video thank you. please more videos with mui 5 like select and date picker slider etc wtih react hook form typescript

[jinweiri]

Today I made my code very neat using your GREAT video. Thanks for doing this fantastic job. Subscribed!

[TheSkeero]

nicely done video man :) ... everything is just fast and on point to the given topic... god job

[samuelwilliams]

I was looking for something on this. Thanks.

[catviper]

Thanks so much for this video! I appreciate it my dude :)

[sabrinalucianavieirapinto]

Awesome! Thanks for helping my desperate soul me Leo!! XD

[jorgejuniorpereira]

Iawe Leo, cara esta série é sensacional, ótimo conteúdo! Não assisti todas as aulas ainda, mas terá sobre upload de arquivos ??

[alex-bello]

Quick question: Is there a performance benefit to using FormProvider & useFormContext vs useController? I used useController when I created a component library because it seemed cleaner due to not requiring a FormProvider. But the rendering of my components isn't as clean as yours, so I'm considering just changing it up.

BTW, love the videos! You do a great job of sharing tons of practical information without making it feel too rushed or drawn out.

[aleksandrmatyka]

Im my case I also need to add onFocus check to memo because after submit I have focus on imput automaticly and dont get validation errors

[crowbr]

Nice video, how i can put mask in UiKit ?? Have some trick:?

[Elator]

Does it mean that each form has its own state? How I store all state in a main component and pass it down as props? I don't like the idea of importing useForm in every component.

[jaros]

Comparing prevErrors and errors objects in React.memo like this i would not work cause in js {} === {} is a always false, you could deep compare using "isEqual" from lodash

[jasa]

This is really good. Definitely has reduced so much code

[omarbadial]

Please can You use React instead of Typescript?

[abuhossain]

hi nice lessons. i get an error while passing props <RHookTextFiledContainerMemo label='Name' name='name' />
error like:
''Property 'methods' is missing in type '{ label: string; name: string; }' but required in type
RHookTextFiledContainerMemo.tsx(6, 3): 'methods' is declared here.''
i didn't find the type of methods !!