Тёмный

React Hook Form Controlled Components 1: The process & MUI Checkbox 

Vlad Nicula
Подписаться 942
Просмотров 4,9 тыс.
50% 1

In this first video of the mini series about controlled components we talk about the simple process of integrating virtually any controlled react component with React Hook Form.
We also see what the end result will look like after we're done with the controlled components integration series of videos.
We start off with a simple NextJS project that has MUI installed already and integrate the Checkbox Component.
👩‍💻 Github Links:
Starting point for this video: github.com/vladnicula/control...
End result of this video: github.com/vladnicula/control...
📔 Chapters:
00:00 Intro
00:41 Project Overview
02:05 Controlled Components
04:28 Step 1: Controlled Properties & API
07:13 Step 2: Component in Isolation
12:43 Step 3: RHF Controller Integration
21:23 Step 4: External Value Handling
29:10 Uncontrolled to Controlled
30:27 Recap & Outro

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

 

22 июл 2024

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 29   
@fares.abuali
@fares.abuali 6 месяцев назад
Thank you so much! Concise & informative 🎉
@OnlyJavascript
@OnlyJavascript Год назад
the best. Thanks man!! Looking forward to next section.
@vlad.nicula
@vlad.nicula Год назад
thank you for the feedback! what’s one thing you learned from the video?
@vladgrecu9080
@vladgrecu9080 Год назад
Really awesome content Vladut, keep em' comming
@vlad.nicula
@vlad.nicula Год назад
Thank you 🙏
@bluebill1049
@bluebill1049 Год назад
Another great video with excellent explanation.
@vlad.nicula
@vlad.nicula Год назад
Thanks! I’m making the PR for the resources page this week, I didn’t forget 👍☺️
@pogadev
@pogadev Год назад
Very nice explanation, you make it look easy! Looking forward for the next videos in the series
@vlad.nicula
@vlad.nicula Год назад
Thank you so much for the feedback 👍
@kashirali9057
@kashirali9057 Год назад
@@vlad.nicula 🙂
@kashirali9057
@kashirali9057 Год назад
good
@jexsie
@jexsie Год назад
Subscribed, I really need more about react hook form. Thanks a lot
@vlad.nicula
@vlad.nicula Год назад
I’ll make a multi part form video next, thanks for the support!
@codernerd7076
@codernerd7076 Год назад
This indeed helps A LOT! Thanks!
@vlad.nicula
@vlad.nicula Год назад
my pleasure, thanks for the feedback. what is one thing you learned from this video?
@codernerd7076
@codernerd7076 Год назад
@@vlad.nicula mostly using MUI and React Hook Form together, but still trying to get a way to create an auto-complete address field with data from the Google Places API to work.
@vlad.nicula
@vlad.nicula Год назад
@@codernerd7076 I’ll cover autocompletes in about 7-14 days from now, I hope it wont be too late 😊
@codernerd7076
@codernerd7076 Год назад
@@vlad.nicula thanks!
@syedsohailahmed6810
@syedsohailahmed6810 Год назад
thank you sir
@vlad.nicula
@vlad.nicula Год назад
glad it helped 👍
@raymondcaddick6208
@raymondcaddick6208 Год назад
I'm getting infinite loading when trying to add this to a form
@vlad.nicula
@vlad.nicula Год назад
Sorry to hear that 😞 not sure what you are referring to, but I hope you figure it out 👍
@raymondcaddick6208
@raymondcaddick6208 Год назад
@@vlad.nicula my bad, I forgot to alias mui checkbox component so I was recursively re rendering the same component. All working now, thanks bro! Great tutorial. Keep up the great work
@vlad.nicula
@vlad.nicula Год назад
@@raymondcaddick6208 happy to hear that! I hope you’ll tag along for the next ones 👍
@ibrahimabdallah328
@ibrahimabdallah328 Год назад
Great video. However, I can argue that the demonstration of useMemo is useless in this case
@vlad.nicula
@vlad.nicula Год назад
Thanks for the feedback. Care to explain why the useMemo was useless?
@vlad.nicula
@vlad.nicula Год назад
you're right! values behave very strangely: codesandbox.io/s/awesome-forest-15wwqg?file=/src/App.tsx The use memo mention was adapted from the older approach I had where props were passed to the form and there was a useEffect that depended on the values. I assumed there was a similar approach with the values, but it seems it works even with nested objets. The only way this breaks is if you change any of the values. If just one value changes, all values change, so yeah, a useMemo does not protect us in that case because even with a useMemo, there would be a new object created because of the new value. I'm glad I learned something too form sharing this video. I hope you'll tag along for the next ones and point out what you see missing or wrong.
@marianschmidt5728
@marianschmidt5728 Год назад
Promo-SM 🎊
@vlad.nicula
@vlad.nicula Год назад
what’s that?
Далее
Building Great Forms with React Hook Form & Zod
1:35:38
Crossing the Most Dangerous Crosswalk
00:24
Просмотров 7 млн
advanced forms with sveltekit superforms
9:12
React Hook Form - Complete Tutorial (with Zod)
28:22
Просмотров 94 тыс.
Advanced MultiPart Forms with RHF, Zod, Tailwind & ChatGPT
2:09:35