Thank you so much for making this wonderful tutorial, you have covered most of the important topics, and the code structure is really clean. Please make such kind of videos more! Tanks again...
This was just incredible! It's exactly what I was looking for having had no previous experience with React Hook Form. However, as brilliant as your RHF MUI converter components are, thought I would point out that there is a 3rd party RHF-MUI wrapper library available called "react-hook-form-mui" available from the npm repository. But even so, your explanation of the RHF events, hooks, and especially its integration with Tanstack Query is invaluable. Excellent job!!
This is the most amazing video I have ever seen on this subject, the teacher, the content, the explanation and the project is absolutely perfect, Thank you for this bro!!!!!
It's amazing. In the future you might want to make a video about the best practices you use in development. Please keep it up, you're doing a very cool job.
@@codegenix These videos can be divided into several parts. To make it easier to follow the course. What do you think? And you will be able to post more videos so that there is more activity on the channel
at 2:18:22 do we really need useEffect? looks like it will trigger unregister if isTeacher is false by default. do you think we can just use a function and bind it to a Switch onChange? function unregisterStudens() { if (isTeacher) return; replace([]); unregister("students"); }
@Ernuna This is also a very performant solution. Just do not forget to run the onSwitchChange function in the switch controller right after the rhf onChange method.
Man, I watched just one hour and learned so much about hooks forms! 🙌🔥 Hands down the best tutorial on earth! 🌟💯 I can't wait to complete it, but I couldn't stop myself from commenting earlier! 😄 I have a question regarding building multi-step complex forms. What's the best approach for this? For example, if we have steps like basic info and contact info, do we need to define useForm for each step (e.g., useForm for step/basic and useForm for step/contact)? And on each page's submit, should we store the values in a Zustand store like this: { basic: {}, contact: {} }?
@faisal_dev951 You can't imagine how much I am glad that the tutorial is useful to you. You're very welcome. As stated by rhf docs itself, the way you just mentioned is totally correct, readable and really clean. I cannot think of more suitable way to achieve the same result.
Great tutorial! Thank you so much for the detailed explanations of extremely necessary and complex things! Perhaps you have some advice on how to implement a “draft” form, when not fully validated values are stored in the “incomplete” status? Not sure how correct this idea is, but this approach seems to be widely applicable...
I'm so glad that you have learnt something! This is an amazing idea and I exactly know what you mean. This is very necessary for complex enterprise applications and requires a fully functional backend server.
@LeonidMaksimshin That's great but I suppose you got a little bit confused. The onError callback is related to React Query and is called whenever your server returns an error or the connection is not successful. If the form is not validated, React Hook Form will prevent the function passed to handleSubmit from being executed.
cool tutorial.I loved it.Alot of concepts learned.Really looking forward to your tutorials.side note: I noted the parse function didnt exactly log the exact issue as is case with your browser. It only gave a generic message.
thank you for such a great tutorial. for some reason I am stuck with two errors, I was wondering if you are experiencing the same because they are sort of silent error that dont break anything but smth is not right: 1 - first is in DevTools is related to changing isTeacher from false to true isTeacher ERROR Type: invalid_literal MESSAGE: Invalid literal value, expected false Value: true Touched: false Dirty: true 2 - second is in console whenever we populate new student name field: Cannot update a component (`DevTool`) while rendering a different component (`Users`).
btw in order to avoid first error do you think it is a good idea to use discriminated union instead of normal union? because our array is dependant on isteacher value const teacherSchema = baseUserSchema.extend({ isTeacher: z.literal(true), students: z.array( z.object({ name: z.string().min(1, { message: "Name is required" }), }) ), }); const nonTeacherSchema = baseUserSchema.extend({ isTeacher: z.literal(false), }); export const userSchema = z.intersection( z.discriminatedUnion("isTeacher", [teacherSchema, nonTeacherSchema]), // rest for variant );
@Ernuna I don't recommend using the rhf devtools for complex scenarios. It is not accurate and is not synced with zod perfectly. To log the current values of the form with performance in mind, I suggest using this hook: function useFormLogger() { const { watch } = useFormContext(); useEffect(() => { const { unsubscribe } = watch((value) => console.log(value)); return unsubscribe; }, [watch]); } function Provider() { const methods = useForm(); return (
); } function Form() { useFormLogger(); return {/* Your form */}; }
@@codegenix ok, so I have an object purchase order and it has it’s properties including an array of purchase order items how can I validate this object “purchase order”
I really appreciate it. Yes, absolutely. I just wanted to show you how to use custom validations for different fields using refine and I just used the email field as an example. Now I realized that zod also has a validation for email!😁 But both of them are correct
Sir, I am newly started learning reactjs. Thank you so much for posting this tutorial. I have a problem in using devtools properly. Will u make such a highquality video on devtools?
Hi Code Genix, awesome video! Can you make a video about internationalization projects? Using tools like i18n for example and next.js or React I tried to create a project with 2 languages in nextjs but I couldn't
@@codegenix ok Appreciate your reply , so then please consider real would project the combination of Zustand and react query with hook form with postgre database
In modern front-end web development, typescript is very recommended and some scenarios (for example developing a complex admin dashboard) is not possible with javascript. So I really recommend you to learn it. It's the same as javascript but with some type safety!
@@codegenix yeah i have plans for that but at this time am not a senior one at this point am making MERN first or sec project after that i want to move towards typescript and nextjs or also you can recommend me something
Sir Can You give us a React+ Tailwind project which can be included React router Dom, REact Hook Form, context APi, React Transtak Query and some animations. Using above these materials we will be helpful sir. If possible pls sir show a Great project using above tools or add some more functions if you assume.
u r teaching as how to properly build things, but don't teach as how this things works and why we should do it this way. I am specificaly talking about the Controller section
@thebocksters2756 Image you have a form containing more than 50 form fields (text fields, auto completes, radio buttons and...), encapsulating the form fields logic (passing data between the MUI component fields and RHF controls) can be a lifesaver. Defining a controller for each mui component in each usage is not maintainable. Therefore, we create different controllers for each form field as needed for encapsulation and better maintainability then we use those controllers anywhere that we want.
Between Formik and React Hook Form, what is your choice and why?
RHF
33:00 but Zod has its own method .email() for checking for email pattern
@thebocksters2756 Thanks for your amazing attention to detail! You are completely right. I was not aware of that!
Thank you so much for making this wonderful tutorial, you have covered most of the important topics, and the code structure is really clean. Please make such kind of videos more! Tanks again...
You're very welcome!
This was just incredible! It's exactly what I was looking for having had no previous experience with React Hook Form. However, as brilliant as your RHF MUI converter components are, thought I would point out that there is a 3rd party RHF-MUI wrapper library available called "react-hook-form-mui" available from the npm repository. But even so, your explanation of the RHF events, hooks, and especially its integration with Tanstack Query is invaluable. Excellent job!!
I'm so glad that you liked it🙏you made my day❤️. Also thanks for your recommended library
Thanks man. Came here from freecode video to support you. :)
I'm ready glad bro. Thanks❤️🙏
Thanks for sharing this tutorial, I really found it helpful. This is something I'm following and I'll recommend it to a few others as well. Thanks !
You're very welcome bro
This is the most amazing video I have ever seen on this subject, the teacher, the content, the explanation and the project is absolutely perfect, Thank you for this bro!!!!!
I'm so glad that you liked it. I really appreciate it🙏💐
It's amazing. In the future you might want to make a video about the best practices you use in development. Please keep it up, you're doing a very cool job.
Thanks, will do! You really made my day!
@@codegenix These videos can be divided into several parts. To make it easier to follow the course. What do you think?
And you will be able to post more videos so that there is more activity on the channel
great explanation thats quite a lot i have to give my whole day i know its going to be worth it thanks buddy for sharing.
Glad to help. Just wait a little bit longer for youtube to process video in 2k quality
at 2:18:22 do we really need useEffect? looks like it will trigger unregister if isTeacher is false by default.
do you think we can just use a function and bind it to a Switch onChange?
function unregisterStudens() {
if (isTeacher) return;
replace([]);
unregister("students");
}
@Ernuna This is also a very performant solution. Just do not forget to run the onSwitchChange function in the switch controller right after the rhf onChange method.
Thank you for the great video. I really want to see a combination of React Hook Form and React Step Builder.
Great suggestion!
Man, I watched just one hour and learned so much about hooks forms! 🙌🔥 Hands down the best tutorial on earth! 🌟💯 I can't wait to complete it, but I couldn't stop myself from commenting earlier! 😄
I have a question regarding building multi-step complex forms. What's the best approach for this? For example, if we have steps like basic info and contact info, do we need to define useForm for each step (e.g., useForm for step/basic and useForm for step/contact)? And on each page's submit, should we store the values in a Zustand store like this: { basic: {}, contact: {} }?
@faisal_dev951 You can't imagine how much I am glad that the tutorial is useful to you. You're very welcome.
As stated by rhf docs itself, the way you just mentioned is totally correct, readable and really clean. I cannot think of more suitable way to achieve the same result.
Great tutorial! Thank you so much for the detailed explanations of extremely necessary and complex things!
Perhaps you have some advice on how to implement a “draft” form, when not fully validated values are stored in the “incomplete” status? Not sure how correct this idea is, but this approach seems to be widely applicable...
I'm so glad that you have learnt something!
This is an amazing idea and I exactly know what you mean. This is very necessary for complex enterprise applications and requires a fully functional backend server.
I seem to have figured out how to do this - through the second argument 'onError' of the 'handleSubmit' function, which is called if validation fails.
@LeonidMaksimshin That's great but I suppose you got a little bit confused. The onError callback is related to React Query and is called whenever your server returns an error or the connection is not successful. If the form is not validated, React Hook Form will prevent the function passed to handleSubmit from being executed.
Thank you so much for this amazing video. 😍😍😍😍😍😍
So nice of you
cool tutorial.I loved it.Alot of concepts learned.Really looking forward to your tutorials.side note: I noted the parse function didnt exactly log the exact issue as is case with your browser. It only gave a generic message.
Yes, you are right. I'm so glad that you liked it
thank you for such a great tutorial.
for some reason I am stuck with two errors, I was wondering if you are experiencing the same because they are sort of silent error that dont break anything but smth is not right:
1 - first is in DevTools is related to changing isTeacher from false to true
isTeacher
ERROR Type:
invalid_literal
MESSAGE:
Invalid literal value, expected false
Value:
true
Touched: false
Dirty: true
2 - second is in console whenever we populate new student name field:
Cannot update a component (`DevTool`) while rendering a different component (`Users`).
btw in order to avoid first error do you think it is a good idea to use discriminated union instead of normal union? because our array is dependant on isteacher value
const teacherSchema = baseUserSchema.extend({
isTeacher: z.literal(true),
students: z.array(
z.object({
name: z.string().min(1, { message: "Name is required" }),
})
),
});
const nonTeacherSchema = baseUserSchema.extend({
isTeacher: z.literal(false),
});
export const userSchema = z.intersection(
z.discriminatedUnion("isTeacher", [teacherSchema, nonTeacherSchema]),
// rest for variant
);
@Ernuna I hope you have enjoyed the tutorial.
Are you talking about the devtools of react hook form or the console tab of your browser?
@@codegenix react hook form devtools
@Ernuna I don't recommend using the rhf devtools for complex scenarios. It is not accurate and is not synced with zod perfectly. To log the current values of the form with performance in mind, I suggest using this hook:
function useFormLogger() {
const { watch } = useFormContext();
useEffect(() => {
const { unsubscribe } = watch((value) => console.log(value));
return unsubscribe;
}, [watch]);
}
function Provider() {
const methods = useForm();
return (
);
}
function Form() {
useFormLogger();
return {/* Your form */};
}
I'm trying to validate any array of objects, like an invoice and invoice details, any idea how to do that?, thanks.
@harrisonwell1719 Would you be more specific? I can help you if possible
@@codegenix ok, so I have an object purchase order and it has it’s properties including an array of purchase order items how can I validate this object “purchase order”
Great tutorial. If I need to store objects removed from useFieldArray remove method to another array for subsequent use. How can I achieve this?
@user-se6mi3fe8w I'm glad you liked it! Would you explain more about your problem? Maybe I can help you.
@@codegenix How can I send you the codes I have problems with? I find I can't post codes here.
Great work, Could you show how add useTranslation from "react-i18next"; to schema ? :)
Great suggestion! I am working on a complete full stack multilingual tutorial.
@3:13 i was the one in 92.5%.
but n0w done subscribe!
Appreciate it bro❤️
Great video. But I have a question. Couldn't we just use z.string().email() for email validation?
I really appreciate it. Yes, absolutely. I just wanted to show you how to use custom validations for different fields using refine and I just used the email field as an example. Now I realized that zod also has a validation for email!😁 But both of them are correct
What if i have multiple forms in a project, Do I have to create separate schema for each form?
Yes absolutely
Sir, I am newly started learning reactjs. Thank you so much for posting this tutorial.
I have a problem in using devtools properly. Will u make such a highquality video on devtools?
What a great idea! Sure my friend.
Also I hope you enjoy learning react and thank you for your positive feedback.
The video is still processing by UA-cam. The 2k quality will be ready in a few hours...
do you know if discriminated union can be replicated in yup?
@Ernuna I'm not sure. But handling unions and intersections in schema is pretty straighforward.
Hi Code Genix, awesome video!
Can you make a video about internationalization projects? Using tools like i18n for example and next.js or React
I tried to create a project with 2 languages in nextjs but I couldn't
I'm glad you liked it! The Next.js docs has great explanation about how to handle the scenario you just mentioned without any third party library
Why are there no examples of MUI Select and file upload?
File upload is a good idea. If there are more request on it, I'm gonna create a video on it
@@codegenix File upload is frequently used in projects. I'm looking forward to your videos. Thanks.
please do redux toolkit practical video
The combination of Zustand and react query is a very common pattern nowadays. Redux can be really overkill for most of the scenarios
@@codegenix ok Appreciate your reply , so then please consider real would project the combination of Zustand and react query with hook form with postgre database
Great tutorial mashti!
Fadaaaaa😂❤
awesome dadash.
Fadat sotoon❤
Subscribed and added to "Watch later" playlist. Hope video get re-uploaded to high resolution.
Glad you liked it! The UA-cam is still processing the video. You can watch it in 2k resolution in a few hours.
@@codegenix That's a very good news!
I Appreciate it😅
Hallo sir ,can you make full tutorial of using prisma in next js
That's a great idea! Sure my friend.
The UA-cam is still processing the video. You can watch it in 2k resolution in a few hours.
Love the video
Glad you enjoyed!
Is typescript is necessary coz I don't know typescript
In modern front-end web development, typescript is very recommended and some scenarios (for example developing a complex admin dashboard) is not possible with javascript. So I really recommend you to learn it. It's the same as javascript but with some type safety!
@@codegenix yeah i have plans for that but at this time am not a senior one at this point am making MERN first or sec project after that i want to move towards typescript and nextjs or also you can recommend me something
That's an amazing plan. Just fully learn the javascript & react then move to typescript and nextjs.
Can you do one with shadcn/ui, i have a hard time integrating all features and you go really advanced. (shadcn uses a bit of tanstack as well)
It's on my schedule sir. Thanks for your suggestion.
Thanks! Subscribed
are you persion?
are sotoon
thanks
You're welcome!
Thanks for this tutorial
Always welcome
you are great!!!
I'm really glad you liked it!
❤ Thank you!
You're very much welcome!
Nice video
Glad you liked it
thank you for video !
You are welcome! The video is still processing by UA-cam. The 2k quality will be ready in a few hours.
great
I'm glad it was helpful
awesome!
Glad you think so!
Sir Can You give us a React+ Tailwind project which can be included React router Dom, REact Hook Form, context APi, React Transtak Query and some animations. Using above these materials we will be helpful sir. If possible pls sir show a Great project using above tools or add some more functions if you assume.
That's an amazing suggestion. I am currently working on a full stack e-commerce project with nextjs prisma and other things that you suggested
@@codegenix thanks.pls use Tailwind css, and React Transtak Query
Always!
u r teaching as how to properly build things, but don't teach as how this things works and why we should do it this way. I am specificaly talking about the Controller section
@thebocksters2756 Image you have a form containing more than 50 form fields (text fields, auto completes, radio buttons and...), encapsulating the form fields logic (passing data between the MUI component fields and RHF controls) can be a lifesaver. Defining a controller for each mui component in each usage is not maintainable. Therefore, we create different controllers for each form field as needed for encapsulation and better maintainability then we use those controllers anywhere that we want.