Recently I'migrated from formik and yup to hook-forms and zod. It would be great if you could create a video with all available validations in zod. It would be great to have it in one place with your explanation. Because you are the best!
How can you create a form to allow users to create a list of arbitrary length (preferably a heterogeneous list, allowing the user to add multiple input types) using this method?
Hi, thank you for your useful video. I have a question about next.js: we know we can't upload files in public folder in production environment, so, instead I'm uploading in other folder( at the same level as public) the pdfs files required, now, how can I show these pdf files inside an tag specifying the src attribute in production environment?
I would advice against this. Have been using rhf in prod for couple of years. I will say it does not scale well with huge or dynamic forms. Better to have individual form instances for each section, then collate the data prior to submission.
Brilliant video thank you! Quick question: Passing undefined into default values in the case of a NewForm results in an error "A component is changing an uncontrolled input to be controlled", did I miss something here? Also if I pass a default value of empty string it correctly validates my zod schema as its just needs a string so an empty string passes which is incorrect (I want it to be required), I can set a min length and print an error message or required but again doesn't feel correct. Any ideas?
if you don't want this behaviour, use react hook forms rules behaviour. Zod has different behaviour and rules, If you want to learn more please refer zod docs
Hey Cosden i have just one query with register onSubmit it scrolls to it and redirects to the specific field, how can i achieve validation, required, error and scrollTo for components that dont register?? i have seen something called that react hook form but i am not quite sure on it. please let me know what can be done here.
When I pass undefined to default values (in rhf) the browser on client component gives me this warning: Changed from uncontrolled to controlled input. But when i explicitly gives {title: “”, email:””} its ok. Can someone explain a better way to tackle this issue
I would like some changes to do if I was using this approach cause I would pass initialvalue from parent like add and edit page cause it is more relative than using if else same for handleSubmir fnc.
The idea behind this video was very good and clear, but it would be more interesting if you would make a modal like with react-query under the hood. I’ve tried to create a such implementation, but it keeps falling for more than 2 use effects (linked data, one data depends on another). If you would like to create a video about this, I could give you access to the repository.
The base ideea is that you can provide a modal state, and a key for what you need, and when you open the modal, you pass to the react query the modal state and the key to enable the fetch request.
Nice idea and video thanks. Just one note, you are already using zod, parsing the user prop with zod would have made the spread for default values unnecessary and the logic a bit cleaner
i would love to see, react query with react hook form and zod. since imnt pro with this, react query has different approach with FORM when it comes to mutations, so i couldnt understand it by myself. anyway Great videos!
Great video but there is a problem. lets say you have a user form. if you want to update a user, password field is optional, so your types and validations have to know that. Maybe something like this: resolver: user ? zodResolver(updateUserValidator) : zodResolver(createUserValidator) , Would be great to see how you would solve that.
Same schema, add discriminator prop like form type, make password optional and if its update user form then check for password on refine. Or make it a diecriminated union figure it out
Have you ever made a video upon limitations of react-hook-forms and Formik? Is there any limitations when some more complex form with array type with multiple fields with some of theme as optional and some with lazy api call lets say some checks on db side and displaying validation like email exists. Such Comparison is bit rare in youtube. Everyone just shows very basic demos. Real usecase form are more complex and thats when only few quality content can help some to take decision which lib one should go with. If application is more complex lets say insurance company portal etc.
Isn't is better to pass an onSubmit function to the component, the form component doesn't need to know what happens to the submitted data it just interested if the data is valid and you can pass only the form data, not the entire user. That way in the future if there is a 3th action the form needs to do ( can't think of one now :D ) you can just change the on submit function that you pass to the component .
No. Its a user form. Its onsubmit is defined in it. This isnt some generic form component. Its a userform only. If in the future u add more fields then where do you add them? In the user form itself... where do you update the onSubmit? Also the user form...
using user data should be done once as default values that's the correct flow based on my experience any way the tutorial is more focused on another aspect and he did well about it @@jazzdestructor
it's bad practise for prop drilling, need to use useform context and make it reusable anywhere. where they need this form or it's part to anywhere. You are doing some if else gimmicks. Also I am your big fan.
Thank you so much sir. this may break my stone age knowledge in programing.
This channel is truly gold! - An invaluable resource for React Developers.
{2025-01-28}
Thanks for this piece. I think I'll have to follow this tut typing the code myself, that way, I'll understand it better.
Why didn’t use Controller from react-hook-form, for DatePicker and Select
You could
How?
Just add value instead of default value. Here is an example value=user?.someProperty || '''
Can u please make a video on persisting user data,I'm really confused what to use .There are multiple options like local storage,redux ..etc.
Recently I'migrated from formik and yup to hook-forms and zod. It would be great if you could create a video with all available validations in zod. It would be great to have it in one place with your explanation. Because you are the best!
Oh, he has a dedicated Zod + React Hook Form tutorial somewhere in his channel.
ua-cam.com/video/U9PYyMhDc_k/v-deo.htmlsi=P0GBpa-8v4zaFMya
How can you create a form to allow users to create a list of arbitrary length (preferably a heterogeneous list, allowing the user to add multiple input types) using this method?
Hi, thank you for your useful video. I have a question about next.js: we know we can't upload files in public folder in production environment, so, instead I'm uploading in other folder( at the same level as public) the pdfs files required, now, how can I show these pdf files inside an tag specifying the src attribute in production environment?
Great video! Question, for a delete form you'd have to create a different form right?
Would be great to see some dynamic form content! It adds a lot of complexity I feel
can be done by useFieldArray from react-hook-form
@@jitesh_khurana yes but my point is that it can be difficult to work with + not much examples of it in the wild
I would advice against this. Have been using rhf in prod for couple of years. I will say it does not scale well with huge or dynamic forms. Better to have individual form instances for each section, then collate the data prior to submission.
Also, maintenance is a pain.
@@thngzys I have reached to a similar conclusion
Would you leave the file as is, or decompose it into smaller files?
Brilliant video thank you!
Quick question: Passing undefined into default values in the case of a NewForm results in an error "A component is changing an uncontrolled input to be controlled", did I miss something here? Also if I pass a default value of empty string it correctly validates my zod schema as its just needs a string so an empty string passes which is incorrect (I want it to be required), I can set a min length and print an error message or required but again doesn't feel correct. Any ideas?
if you don't want this behaviour, use react hook forms rules behaviour. Zod has different behaviour and rules, If you want to learn more please refer zod docs
Hey Cosden i have just one query with register onSubmit it scrolls to it and redirects to the specific field, how can i achieve validation, required, error and scrollTo for components that dont register?? i have seen something called that react hook form but i am not quite sure on it. please let me know what can be done here.
Any coupon code for your course please 😮
When I pass undefined to default values (in rhf) the browser on client component gives me this warning:
Changed from uncontrolled to controlled input.
But when i explicitly gives {title: “”, email:””} its ok. Can someone explain a better way to tackle this issue
Thank you. I will try to refactor my code. 😅.
I use to have create and editform
I would like some changes to do if I was using this approach cause I would pass initialvalue from parent like add and edit page cause it is more relative than using if else same for handleSubmir fnc.
How to deal with nested array? That would be awesome.
Excellent demonstration of how to build an Edit/Add Form with React-Hook-Form and Zod. Thanks, Darius.
{2024-07-09}, {2024-08-01},{2025-01-28}
The idea behind this video was very good and clear, but it would be more interesting if you would make a modal like with react-query under the hood. I’ve tried to create a such implementation, but it keeps falling for more than 2 use effects (linked data, one data depends on another). If you would like to create a video about this, I could give you access to the repository.
Wouldn't simply providing a key should be possible?
The base ideea is that you can provide a modal state, and a key for what you need, and when you open the modal, you pass to the react query the modal state and the key to enable the fetch request.
Nice idea and video thanks. Just one note, you are already using zod, parsing the user prop with zod would have made the spread for default values unnecessary and the logic a bit cleaner
Passing the parsed value as defaultValues?
@@rezaz7167 exactly. Something like:
defaultValues: user ? formSchema.parse(user) : undefined
i would love to see, react query with react hook form and zod. since imnt pro with this, react query has different approach with FORM when it comes to mutations, so i couldnt understand it by myself. anyway Great videos!
Can I apply same to react native?
why you didn't use reset
Big fan of yours
Can you make more video on clean code and SOLID principle
Why is it so hard to pre-populate data in react. Why!
Great video but there is a problem.
lets say you have a user form.
if you want to update a user, password field is optional, so your types and validations have to know that.
Maybe something like this:
resolver: user ? zodResolver(updateUserValidator) : zodResolver(createUserValidator) ,
Would be great to see how you would solve that.
Same schema, add discriminator prop like form type, make password optional and if its update user form then check for password on refine. Or make it a diecriminated union figure it out
Have you ever made a video upon limitations of react-hook-forms and Formik?
Is there any limitations when some more complex form with array type with multiple fields with some of theme as optional and some with lazy api call lets say some checks on db side and displaying validation like email exists.
Such Comparison is bit rare in youtube. Everyone just shows very basic demos. Real usecase form are more complex and thats when only few quality content can help some to take decision which lib one should go with.
If application is more complex lets say insurance company portal etc.
because the majority of people watching youtube tutos are beginners
Please add server action and error handling with this combo.
Isn't is better to pass an onSubmit function to the component, the form component doesn't need to know what happens to the submitted data it just interested if the data is valid and you can pass only the form data, not the entire user. That way in the future if there is a 3th action the form needs to do ( can't think of one now :D ) you can just change the on submit function that you pass to the component .
No. Its a user form. Its onsubmit is defined in it. This isnt some generic form component. Its a userform only. If in the future u add more fields then where do you add them? In the user form itself... where do you update the onSubmit? Also the user form...
Please make a video on jwt authentication with Redux persist
I would like to see how make add edit form with images
I am currently using bunnycdn to handle them
really nice video, but I think you don't have to pass the default value for every input manually I think just can use the form default value better
The reason why he had to pass manually is because he didn't use the Controller
i think he could use getValues / watch instead of user Obj for consistency
using user data should be done once as default values that's the correct flow based on my experience any way the tutorial is more focused on another aspect and he did well about it
@@jazzdestructor
yeb could be@@thngzys
Your contents are great. Can you please cover some other tech stack apart from react. Like devops or backend .
it's bad practise for prop drilling, need to use useform context and make it reusable anywhere. where they need this form or it's part to anywhere. You are doing some if else gimmicks. Also I am your big fan.
17 minutes for a video on how to receive default values from props. Damn. People be milkin' hard.
Yup ...I am pretty sure these people are jobless and shameless scamming noobs
First comment 😜