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

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.

⭐ Become a full-stack web dev with Zero To Mastery Courses:

👇 Follow Me On Social Media:

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:

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

[ryanriddell]

Appreciate this concise example.

One tiny enhancement suggestion. On UserForm where you're using InputWithLabel, instead of having <InputWithLabel<typeof defaultValues> ... /> all over the place. You can at the top of the file define a typed version of the input. For instance const UserInputWithLabel = InputWithLabel<typeof defaultValues>. Then in the form itself you just have <UserInputWithLabel ... />. Not a huge enhancement, but perhaps a tiny bit cleaner. And you can't forget the type by accident.

[irfantayyib]

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

[alecjohnson]

can you explain a bit more deeply why the `toString()` part was necessary at 3:56 ? I would have thought that adding `& string` would be enough for typescript to know that the nameInSchema field was a string.

[nemogames]

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

[Halilbek_]

Thank you Dave Gray, I came cross with problem, by your video I fixed my problem 😊

[lavdev]

Great tuts.
Hello Dave, could you please make a video about clearn achitecture or haxagonal achitecture please?

[hadz]

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.

[MohamedSalah-ezhf]

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.

[MohamedNafees-yeoy]

can you do a full course on webpack typescript react there is not a detailed video on youtube in this topic, it would be awesome if you post it .

[siddiqahmed]

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

[alialhussein]

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 😂

[ashmitagarwal]

Hi Mr Dave, can you explain how to add arrow key controls to navigate in a form or in a nested navbar

[ajiteshmishra]

While making final component to render

We write the code like

export default function App(){
return ()
}

OR

export function App(){
return ()
}

OR

function App(){
return ()
}
export default App;

OR

const App = ()=>
{
return ()
}
export default App;



What is the difference in these 4 types of "export" in React-JS??

[deepstories]

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

[boris_p_petrov]

Hey Dave, thanks for the explainer. Quick question: why not just pass the “User” type to your input components instead of “typeof defaultValues”? After all, if the User type passed to useForm is used to enforce the type of the “defaultValues” property, then they should be equivalent, no?

Just wondering if I’m missing a technical nuance or if this comes down to style/preference.

[JacksDeadInside]

Anyone know how he gets his html 'brackets' (I don't know the exact name, the </>) to be so bright and "connected"? Mine are so dim and hard to see. I love how it looks but can't find any settings or extensions to replicate it.

[Dragon-fr]

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

[rajfekar]

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

[togya]

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

[tranngochai]

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