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

Подписаться 7 тыс.

Просмотров 16 тыс.

50% 1

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:
github.com/leoroese/reacthook...
Part 2 Finish: github.com/leoroese/reacthook...
React-Hook-Form Docs:
react-hook-form.com/
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

Опубликовано:

4 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 25

@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.

@TheSkeero 2 года назад

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

@jinweiri2485 2 года назад

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

@CodeDunks 2 года назад

Appreciate it Jin!

@mohdsahil226 2 года назад

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

@CodeDunks 2 года назад

Just finished learning it, should have a video out soon about it!

@samuelwilliams7331 2 года назад

I was looking for something on this. Thanks.

@catviper3728 2 года назад

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

@CodeDunks 2 года назад

Appreciate you taking the time to watch the video!

@rammehar5531 2 года назад

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

@biancadragomir 2 года назад

nice, thanks a lot for the video!

@sabrinalucianavieirapinto5602 2 года назад

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

@alex-bello 2 года назад

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.

@jorgejuniorpereira7474 Год назад

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

@CodeDunks Год назад

Valeu Jorge! Não lembro dereito se inclui como fazer upload de arquivos mas achei esse artículo que talvez explica www.newline.co/@satansdeer/handling-file-fields-using-react-hook-form--93ebef46

@jorgejuniorpereira7474 Год назад

Obrigado Leo, vou olhar este artigo agorinha!!! Vlw

@aleksandrmatyka3118 2 года назад

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

@Elator11777 2 года назад

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.

@CodeDunks 2 года назад

You could use FormProvider and useFormContext

@crowbr 2 года назад

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

@jasa6732 2 года назад

This is really good. Definitely has reduced so much code

@jaros8924 2 года назад

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

@CodeDunks 2 года назад

Hmm interesting, do you know what isEqual does under the hood for that method?

@omarbadial3880 Год назад

Please can You use React instead of Typescript?

@abuhossain4274 Год назад

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