Why You Should Use TypeScript Generics with react-hook-form

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

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

50% 1

Web Dev Roadmap for Beginners (Free!): bit.ly/DaveGrayWebDevRoadmap
Learn Why You Should Use TypeScript Generics with react-hook-form. In this short video, we'll answer a viewer question by refactoring a custom input in a react-hook-form to use a TypeScript generic.
💖 Support me on Patreon ➜ / davegray
⭐ Become a full-stack web dev with Zero To Mastery Courses:
- Complete Next.js Developer: bit.ly/CompNextJSDev
- Advanced React: bit.ly/AdvReactDev
- Junior to Senior Dev Roadmap: bit.ly/WebDevRoadmap-JrtoSr
🚩 Subscribe ➜ bit.ly/3nGHmNn
📬 Course Updates ➜ courses.davegray.codes/
❓ Questions - Please post them to my Discord ➜ / discord
☕ Buy Me A Coffee ➜ www.buymeacoffee.com/davegray
🔗 Starter Source Code Example: github.com/gitdagray/nextjs-f...
🔗 My Next.js Videos: • Next.js Tutorials for ...
👇 Follow Me On Social Media:
GitHub: github.com/gitdagray
Twitter: / yesdavidgray
LinkedIn: / davidagray
Why You Should Use TypeScript Generics with react-hook-form
(00:00) Viewer Question on TS Validation
(01:43) Add a TS Generic to the React component
(04:45) Pass the Schema type to the Input
(07:02) Wrap up
📚 Tutorial References:
🔗 shadcn/ui: ui.shadcn.com/
🔗 shadcn/ui Dialog component: ui.shadcn.com/docs/components...
🔗 react-hook-form: react-hook-form.com/
🔗 Zod: zod.dev/
🔗 zod-fetch: www.npmjs.com/package/zod-fetch
🔗 @hookform/resolvers: www.npmjs.com/package/@hookfo...
Was this tutorial about how to use TypeScript Generics with react-hook-form custom inputs helpful? If so, please share. Let me know your thoughts in the comments.
#typescript #generics #react

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

21 июл 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@irfantayyib 8 дней назад

Hello Sir! I wanted to thank you for making React Next Node and Redux series along with teaching libraries like axios and jwt etc. I got employed as a MERN stack developer and I learnt a lot from you. Thanks a lot! :D

@yourcasualdeveloper 17 дней назад

As always great video Dave!

@David-f8t 11 дней назад

Thanks for another wonderful video

@ebn646 18 дней назад

Another great tutorial as always.

@DaveGrayTeachesCode 18 дней назад

Thank you!

@aymenbachiri-yh2hd 14 дней назад

THank you so much dave

@nemogames5354 17 дней назад

i find it funny how a guy with 300k+ subs uses ai mugshots for profile picture. true engineer right there

@hadz08 18 дней назад

Love your content! Your teaching methods are on point. I was wondering maybe you could do an advanced tutorial using nextjs on how to implement a multi subscriptions with stripe for a Saas.

@DaveGrayTeachesCode 18 дней назад

Great suggestion!

@ahmedkhabar 18 дней назад

Thanks a lot for This Amazing video as always ❤❤❤❤❤❤

@DaveGrayTeachesCode 18 дней назад

You're welcome!

@alialhussein 16 дней назад

Thanks Dave It a good start point to what I pretending to do soon, also it will be great if you made some reusable custom form fields made with shadcn hook form and zod. Just like inputField SelectField DateField ImageField ..etc. with all possible cases especially SelectField with mutli select, async data fetching, data caching and so on.. I've done this before but with react suite, formik and yup, and now after I moved to chadcn I feel lazy to redo all this stuff 😂

@MohamedSalah-ez9hf 18 дней назад

Amazing tutorial as expected. Hello Dave, could you please make a video that shows how to use react query with Axios interceptor? The objective is to make all the requests sent from one place for error handling and Auth header also for a refresh token and may need custom hooks in this case. I know it's quite an advanced pattern. so, please make a video about that topic, or tell me how to think about this case.

@DaveGrayTeachesCode 18 дней назад

Both React Query and Axios are used for fetching data. It would be strange to use both. If you want to use RQ, I would look for something it offers that functions like an interceptor does in Axios.

@MohamedSalah-ez9hf 18 дней назад

@@DaveGrayTeachesCode Ok, but the objective is not to use both together ( RQ + Axios ), but to make all the requests sent from one place for error handling and Auth header also for a refresh token, and I want to use a cleaner way to apply that using React Query. Very thanks for your interesting :)

@zayne-sarutobi 16 дней назад

@@MohamedSalah-ez9hf you can check github.com/ryan-zayne/callapi for that... It might be just what you're seeking for

@MohamedSalah-ez9hf 16 дней назад

@@zayne-sarutobi Thanks for sharing :) I already have an implementation for this case 1) Custom hook for an Axios instance that handles the request headers like auth token and the request global error handling like showing a specific error message based on the status code refreshing the token and resending the failed requests when the access token is expired 2) Custom hook for each business logic that includes a group of functions that are used with React Query hook as queryFn By this implementation, I have the business logic separated for each service and one place for the pre and post-action for any request, and that is enough for my case.

@MohamedSalah-ez9hf 16 дней назад

@@zayne-sarutobi The cashing and state management are the main objectives for using this pattern

@togya4 18 дней назад

Dave, when will you do a react native course? Also is it possible to use the nextjs backend with the react native rather than nodejs? Cuz i don't like node much

@DaveGrayTeachesCode 18 дней назад

Thinking about React Native in the last half of this year, but no specific date yet. React Native is for mobile apps. If you want to replace Node.js for your backend, you will want to look at other solutions like Python with FastAPI (tutorial coming very soon on this) or there are several other backend options.

@bhuvanachandra5121 12 дней назад

Hi @DaveGray , do you know why "stopAtFirstError" validation pipe is not working as expected in nestjs??

@rajfekar1514 9 дней назад

in authjs v5 how to sync google provider login and credentials login via rest api?

@deepstories32 14 дней назад

sir i really loved your videos , but i am very confused in coding , i am doing python , html and css at same time , please tell me which programming should i master first

@tranngochai6558 18 дней назад

I have a question. Hope you can answer. What if we have a nested schema? like "user.name". what can we change the nameInSchema?. Thank you

@DaveGrayTeachesCode 18 дней назад

react-hook-form identifies the dot notation, but TypeScript will only identify the top level keys as a keyof. For the solution shown here, you'll want everything in a flattened object.

@allone258 9 дней назад

@DaveGrayTeachesCode instead of 'keyof T & string' just use FieldPath from use-hook-form

@siddiqahmed3274 18 дней назад

At 06:28 you spread defaultValues. Shouldn't it be just defaultValues?

@DaveGrayTeachesCode 18 дней назад

Good catch! It works either way. Sometimes I default to creating a new object when it's really unnecessary.

@r-i-ch 18 дней назад

Moar about TS generics! Thanks for thevideo

@DaveGrayTeachesCode 18 дней назад

You're welcome!

@M7ilan 18 дней назад

How to validate a file? and use Nextjs Server Action, I gave up trying to make it work. it's tough. I'm talking about uploading multiple files.

@DaveGrayTeachesCode 18 дней назад

Good request! next-safe-action supports file uploads. I'll see what I can put together.

@M7ilan 18 дней назад

@@DaveGrayTeachesCode Thanks, doing it with Supabase would be appreciated. but whatever works.

@tienvohoang5359 17 дней назад

I don't think uploading files directly to a serverless function is a good idea. You should use the pre-signed url method to upload files to a blob storage like S3 instead.