React Hook Forms: Master Form Handling in React

1. Course Introduction: Welcome to this course on mastering react Hook forms. I'm Fazal, and I'm excited to be a guide into this journey wherein we would learn how you can manage forms effectively in react. Now, managing forms can be complex and a tedious task, and that's why I'm thrilled to introduce you to react Hook form, which is a tool that revolutionizes form handling in react. Throughout this course, we will explore everything from basic forms to advanced validation techniques and making your form handling more streamlined and effective. Cover a lot of things like introduction to forms in react. We'll talk about react hook forms, basic wherein we'll cover the nitty gritties of form management with react hook form and how this library called react Hook Form works. We'll also understand validation techniques and how you can implement robust validations. We will learn about performance enhancements, and I can assure you that by the end of this course, you will have all the tools and knowledge to create a powerful user friendly forms in react. Who is this course for? So this course is perfect for anyone who is looking to elevate their react skills. Now, whether you are a beginner or someone who is aiming to deepen your knowledge or form management in react, so everyone can benefit from this particular course. This course is completely hands on, and whatever we'll be learning, we will be learning by taking a look at examples in real. So I'm super excited to take you on this exciting journey. I hope you are excited too, and I'll see you on the other side. 2. Getting Started: Forms in React Made Simple: So now it's time that I'll talk about the forms and how can you manage form data in react. So what we are going to do is we are going to create a basic form and we'll learn about the nitty gritties of form management or data management with Forms, right? So here I have a very simple react wheat project, you can see, and it's a very simple code. The initial boilerplate, I have done a little bit of cleanup in app JSX, as you can see, okay? And app.j6 is being rendered in mean dot Jx over here with the strict mode, right? Close this. And here I have a CSS, which is very basic CSS. It's nothing much. I'm setting the margin to zero pixels for all, and then for Dev I'm adding flex the display of flex justifying everything to center. All right. So I'll just close this and we'll focus on app.j6. All right. I have the server running and you can see the output on the right hand side. All right? Now, what I'm going to do is I am going to add a very simple input field, and we are going to build on that. All right. So what I would do over here is here. Okay? I'll say form, o because input field has to be inside the Fm tag, okay? So this is our Fm tag, all right. And I'm going to say on submit over here, on submit, we need to submit it somewhere. Okay? So we need to have a function that will handle the submission. But for now, I'll keep this as empty and I'll fill in that place later on. I'll add a label over here, okay. And the label will be name. Okay. Let me see if this oops. I'm going to get an error. So let me add that function as well because we are not going to see the output, so I'll say handle submit over here, submit something like this. And over here inside the component, I'm going to say const, handle submit, something like this, and I'll I have a mt arrow function here, added. All right. So nothing happens as of now, as we need to define the logic as to how the submission would work. All right. Now, this label is there, okay? We have the closing tag of label, and I'm going to add a input over here. Okay. And I'm going to say the input is of type text. Okay? So the type is text over here, and I'm going to say name is name over here. Okay. So this has got single single quotes are better have the consistency over here. This is name. I'll have value over here. Now what is value? Value, we need to assign. Okay, so I'll just have zero over here, something like this. Okay. But this is not the actual name. We need to link it to something or este if we create. Okay? So I'll say on change, we need to have handle change over here. Okay? So on change, what happens? I'll mention that as well. Okay? Now, I'll have over here and I'll say handle change. Something like this. Okay. So here I have, you know, this field that has been added, okay? Now what I'm doing is I'm making use of this value value, what it does is it will bind the initial value over here. On change will trigger the onchange event if there is any change in this particular field, okay? And right now I'm linking like on change, call this particular function handle change. And this is a function that is going to handle the change for us, okay? We can have some logic over here, okay? So in handle change, what I can do is I can accept the event object over here. Okay. And I can say console dot log over here, okay? And I can say E dot target dot value. Okay. And over here, if I come in, okay, I think this should be okay right now. Let me save this. Let me head over to inspect. We should see the log as and when we are basically as and when we are typing in. So I'll do a hard refresh so that all the errors go away. Okay. And I'll just say, so you can see, I'm typing in things. Oops. So basically, this has a value of zero, basically. So that's a problem over here. If I comment this out, let me comment this out. Okay. And now if I type in, okay, I can say I love. You can see react. You can see how it's being triggered. So it's printing everything every time I type in on every key stroke over here. Okay? So that's what is happening over here. Now value over here that I've commented, okay, it's an attribute for input that controls what text is shown inside the input field. Okay? So if I link it to zero, if I say zero over here, you'll see zero over here, like we were seeing. And normally value field is usually used to tie a particular field to a state variable. Okay? We don't have a state variable created yet, which we'll be creating in moment, but that is why value is being used and I've commented it until we have the state of variable being created, okay? On change over here, what it does is it is a event handler that tracks the change in the input field. So every time the user types in or edits input, the on change function is triggered, allowing you to update the state with the new input value. Okay? So here, right now, we are not playing with State yet, but what we are doing is on change, we are seeing handle change, and this function is triggered every time there is any change in the input field. And what are we doing in handle change? We are accepting the event object, and we are saying et target dot value, which is giving us the value that is there in the text field, okay? So E basically represents the event object that gets passed to the function when the event occurs, and event can be anything like clicking on a button or typing in a field. That's some basics as to how this code is working so far. Okay? Now, what we are going to do is we need to tie everything to a state. So I'm going to say const I'm going to say form data. So this is stat that I'm creating and form data is basically going to help me store the data for the entire form. So there could be multiple fields in the form. Right now we are having single field. We could have multiple fields, and we could have or we could make use of Form data to store everything. Okay? So I'll say form data over here. And what I'm going to do now is I'm going to make use of use state over here, use state, something like this, and I'll initialize this to something. Okay. So over here, I'll have a object. I'll initialize it to object, and I'll make use of key value pairs. Okay. So this will be empty. Name will be empty. If tomorrow there are multiple fields over so I'll make sure I update this object over here. Okay? I hope this is making sense. Okay? So this is name over here, and I'll have it this way. Okay? So this looks better to me. Okay. So yeah, this is form data over here, and now what we need to do is what I would do, I would say on handle change, okay? We are having the value over here, et target value, target dot value. Okay? So what I will do is I'll call set Form data. Because on every change, I want to make sure that the state variable has the updated data. Over here, I'm going to say form data. So destructure form data first, whatever data it has, add that. Okay? And then what you do is you add a square brackets, you do e dot target dot name over here, okay and you add a colon and you say E dot target dot value. Oops, value. Okay, this sort of suggest is not good, but he dot target dot value and I'll add over here. Okay? Now, what this function does is or this piece of code does is over here. So this is clear when this is called handle change. Whenever you change anything in the field, handle change is called. It passes the event object, which has the details of the entire event, right? So what we are doing over here is we are seeing set form data. Okay, destructure the current form data. Okay? So with this spread operator, we are saying keep existing values of form data, so it spreads itself. Okay? And then we are getting the name of the field over here. Now name is over here if you scroll down, it's name, right, which is also the attribute over here, right? The attribute and this should match over here. Name and this name should match the key over here, right? So this is matching. So we are seeing E dot target dot name colon e dot target dot value. Okay? So it becomes name colon, whatever value you typed in, okay? And when you add this, what happens is the field that has changed because this is a field we are talking about. The field that has changed will get replaced inside this spreaded data over here. That is what is going to happen. Set form data will always pick the latest data that exists and it will update the form state. Let us test this whether this is working fine. I'll do hard refresh. Okay. And what I'll do is, okay, we are actually we're making use of form data. Okay? What we can do is over here, we are not making use of state yet. Okay? So what we would do is if you scroll down, we're not seeing any sort of errors over here. Here in the value. Let me uncomment this. Now we have A state, right? So I can say form data dot name, something like this. We are now binding this to a state variable, basically. If I refresh, you don't see any sort of errors, and you can type in. So you can say test. You can see everything coming in onto the console. Here, instead of printing e dot target dot value, what we can do is let us try printing form data dot Name over here. Okay. Let us do hard refresh, and then you can say test. You can see how the updated data is coming in. Okay, so this is one step behind, we typed in T and T has not come in because the update for T is being done after the value is printed. Okay? So if you move this line after you are updating the state over here. Okay, then in that case, you're going to see the latest thing. Okay? So if I say test, you can see, oops, it is still the same over here. Okay, so it's because the updates are asynchronous, okay? And you are actually in the same function. You are trying to print it to the console, okay? But the state is getting updated perfectly, okay? There's no issue as such, so I'll get rid of this console dot log for now, okay? Now, let us handle the submission over here. Okay. So what happens when you submit the form? All right. Now when you submit the form, we will first say E dot prevent default. Okay. Now what is E over here? We are not accepting E, so we need to accept the parent sorry, we need to accept the parameter of type E of name E, which is event. I'll say prevent default, we are doing this because we don't want the default behavior over here. So default behavior on submit in browsers is the page reloads. I don't want that. Okay? So I'm simply going to do console dot log. I'm going to say form data submitted. Over here, and over here, form data, something like that. Okay, you did this, and now, if you scroll down over here, okay, we need to add a way over here for people to submit the form. So what I'm going to do is here at the end, I'm going to have a button. Okay, I'm going to call this as submit button, and the type of this button is submit. Okay? Something like this. Let me refresh over here, S and refresh. All right. And we can see name is I love react. Okay? Let me submit. You can see the form data and you can see the state variable is updated. You can see name is I love react. All right. So so yeah, it's working absolutely fine, as you can see over here, okay? How is this state, what is this state? What does this state do? This state is keeping track of the data that exists in the form, o and we are making use of the object, which consists of key value pairs, right? And how is it keeping track of the data? It is keeping track with the help of on handle change. So on handle change is triggered on change event, okay? So whenever there is any change in the input box, handle change is triggered, and it is basically updating this thing over here. It is basically updating the form data over here. You can see. And form data will always have the latest thing with whatever you type in will be there in the form data, okay? And then it is handling the submit. How is it handling the submit? It is whenever this is hit, it's saying prevent default, and it is just printing the updated value in the form data. Okay. Let's see how this will work if you have one more field over here. Okay. Now if you have one more field, let me just duplicate this over here. I'll have this. Instead of name now I have email over here, okay? And the type is email. Okay. I'll say email. The name is also email over here, form data dot email over here, and handle change is same. Okay? Form data dot email, so we need to add one more value over here, right? So I'll say here. I'll say comma and I'll add email, something like this. Okay, this is done, and I'll make it this way. All right. So this is done, right? I have email as well now. Now let us do a hard refresh, and I can type in IoveRact I'll say john at rate example.com. Oops, example.com. Let me submit. Moment I submit, you'll see name is I ove react, and email is jon at rate example.com. I hope this is making sense. Now, the number of fields you have, the number of attributes you are going to add in this state object over here, okay? So this this form data will do the job of handling the entire form data for you, okay? And these two functions will help you manage the data, okay, how the submission work, how the change works, and all. Okay? And the form can keep on growing time to time, right? So I hope you have been able to follow along, and I hope this has been useful. 3. Troubleshooting: Common Pitfalls in Basic React Forms: So now it's time that we begin improving this form that we have built, right? And we're going to add some sort of validations in this particular form, right? Because, you know, when we are working with forms, form validations are common, and you might want to validate the data that user is filling in to the forms, right? So that's what we are going to do. So what I'm going to do over here is I'm going to have a function over here, defined, okay? I'm going to say const, validate. Okay. And so this validate function is a arrow function over here and I'm going to have the logic inside this function. So what I'm going to do is I'm going to first. So validation is going to give us errors, and we might want to keep track of errors. So first, I'm going to say const over here. I'm going to create a state called errors, and I'm going to call set errors. Okay. Now this is going to help us keep track of all the errors that are happening over here, okay? I'm going to initialize it to empty key value pairs, all right? And inside validate what I'll do is I will create const new errors, and I'll create an empty key value pair object, okay? All right. And now what I'll do is I'll say if I'll see form data. I need to check if name is filled by user or not. I want to make name as the compulsory filled. So I'll say form data dot name dot Trim. Okay. If this value does not exist, so I'll add a exclamation. If this value does not exist, that is what this condition is checking for. I'll say new errors dot name, and I'll say name is required. Okay? So I'll say name is required, something like this. All right. And what I would do is I would return new errors. Okay. So I would return new errors, right? Something like that. So this function, what it does is it is creating error messages. It is validating and creating error messages and returning us the key value pair or I should say. So here, what is happening is new errors dot name. So this is going to have a name attribute with this message. But it's giving us an object essentially with all the error messages, and the key is basically the name of the field over here, which is name field. So here you can see this is the name field. Right? Now, what we need to do is we need to trigger this validate over here. Okay? Now, when should we trigger validate? So we'll see on handle submit. Okay? I'm going to say const, validation errors. Okay, validation errors is equal to validate, okay? Something like this. All right. And I'll say if I'll have to check if validation errors has any key value pairs. So I'll say object taught keys. So if object dot keys for validation errors, okay. Taught length is greater than zero over here. Okay. Then what we need to do is we need to actually say set errors. Okay, I'll set errors, and I'll say validation errors. Like so. Okay. Otherwise, what we will do is we'll submit the form, right? If there is no validation error, then we need to submit the form. So oops. So I'll just have this thing over here and I'll cut this and I'll move this inside the se block because the form needs to only be submitted when there are no validation errors. Allright? Something like this. It is done. Okay. And yeah, I think this is it. We also need to display the error messages. Okay? So I'll scroll down over here. Okay. And here, just beside name, okay? Just beside name on handle change. Okay, I'm going to have some code over here. I'm going to say errors taut, name over here. If errors dot name, and I'm going to make use of logical and, and I'm going to say span and I'll just end the span tag over here and I'll say errors, Tt, name, something like this. Okay. So now if there is any error, it'll be displayed over here, okay? So this is shown only if this is true. If errors dot name exist only then this is shown. Otherwise, it's not shown. Okay? If I submit this, I'm not seeing anything right now. So it's not working probably because I think I've made a mistake over here in trim. So trim is basically a function. I miss this open and closing round precess. Okay. Let me to refresh. And if I say submit, you'll see name is required. All right. And it's being displayed in a weird way because there is literally no CSS that I'm using. Okay, very basic CSS. But you get how this works, okay? You can add CSS as per your choice if you wish to. All right. So what I can do is over here in span, I can say style over here, here itself. I can say within this, I can say color, right. Like so. Okay, so you can see it's now red in color, right? And, yeah, you have the errors being displayed, okay, over here. To adjust things on new line or had a line break over here, what I can do is after the span element is rendered, I can add a line break tag over here like this. Okay. So this will make sure that things are on the new line, right, and the error message is displayed this way. But you can see how name is required is come in, and I can type in. I can say test, and I can see submit. Okay? Oops, it's still there. 1 second. Let me check. So test. This is working fine. And if I get rid of this, Okay, this is not there. And then if I type in, this is still there. So this is not being cleared is because the new errors or the error state over here is not being cleared. Okay, so we are not updating as I type in the data, right? So what we need to do is here on handle change, okay, as we are typing in the data or on handle submit. Okay, so it's best that I handle this on handle change over here. So here in handle change, what I will do is I'll create a concept over here. Okay, and I'll have name value. Okay. And I'll say e dot target. Okay? So what I'm doing is I'm getting the field name and the value o where change is happening. Okay? That is what I'm doing over here with this, okay? And then after the form data has been set, I'm going to say okay if there is any value for errors and name, Okay, where the change is happening. Okay. Then in that case, say const new errors, o and I'll destructure the existing ones, okay. Restructure the existing ones. All right. And then what we can do is I'll say delete new errors, and I'll say name. Okay. That's a bit of handling over here. Okay? And I'll say set errors, and I'll set the new error object, I'll say new errors. Like so. Okay. This is done. And now as we change, you'll see the error is being cleared. Okay? If I get rid of this and if I say submit, name is required, and if I say I love react, the error is gone. You can see how dynamic this is. Okay. You can update this and improve this for other fields as well. But for this single field, you had this much of work too, too, right? So you can imagine how validations can go complex over here. Okay. So the goal over here of doing all of this and showing it to you was to show you how forms can be built in react without making use of any sort of library over here, like hook forms, okay? So if you are managing forms by yourself in react, this is all you will have to do, okay? You can see like a form with just two fields you had so much to write. There is a lot of code duplications, right? So for multiple field, the handle change function will grow in size, right? There will be a lot of code in there. For validation, you have to add more validations, okay? So for example, over here, we're adding validation in the validate function for name, okay? You need to add similar validation for emails as well. Okay? Now, email if you want to add some sort of complex validation, like you want to check for, add the rate and the email format, you will have to write all of that. Okay. So it'll add a lot of complexity over here. This method will also grow, okay? And with many fields, imagine how re rendering will become, right? It will become tricky. So yeah, so that's the problem that I want to highlight over here. Well, one approach would have been is to show you directly by making use of react hook forms and explaining you as to how easy it is to use, okay? But I wanted to go through the hardway first, okay? You understand this first as to how things are being managed in react using JavaScript. Okay. So I'm making use of JavaScript code as well and react features like states over here. Okay? How things are being managed in react using JavaScript. Okay, that you need to understand first. Only then you will understand the importance. So if you go through this, only then you'll understand the importance of making use of react hook forms or some other library, right? So that's something that I wanted to highlight. All right. So I hope you have got a gist of how you can do validations, handle submissions, and manage error messages with react and JavaScript. 4. Unlocking Power: A Deep Dive into React Hook Form: Hey, there. So now it's time that we begin talking about react Hook forms. So if you Google React Hook form, you will be taken to this web page, or you'll find this link on google.com or any favorite search engine of your choice. So reacthokfm.com. This is the website over here. Be sure to make a note of the hyphens over here. Okay? Now, this is what we are going to use over here, and you can see it's a flexible, extensive, easy to use solution with validation for react forms. All right? There are a lot of features that they highlight over here. They also have a code sandbox version over here for you to edit and play around with, okay? And you can see the features, it isolates render. So there is minimize rendering, okay? You subscribe, okay? So performance is important aspect of the user experience. So you can subscribe individual input fields without re rendering the entire form, okay? So over here, it's fast amounting. So it provides a lot of benefits as compared to the traditional form management and React. And if you go to get started, you'll find some some code snippets over here. Okay? So you can use it for JavaScript, typescript, okay, depending on your requirement. All right. So I'll select JavaScript over here because you're making use of react. And here, you can install it this way. So it's a external library that you're using and using NPM package manager, you can install it onto your system and add it to your project over here. Okay. Now, here are a few things you need to keep in mind as to how it works. So first thing is if you have a form created, Okay. First thing is you need to import this hook. Okay, you need to add this hook. Then you need to get these functions depending on what you want, okay? So register function. There are different functions that you get from use form and use form you're getting from react hook form over here. Okay. Now, register is something which allows you to register a input element or any sort of element basically to react hook forms. And when you do register, what happens is the validation and everything is managed, even submission is managed by react hook forms. Okay? So register is a way of you telling react hook forms to manage that particular element for you within the form, okay? It also handles the submit. So here you have handle submit as you can see, and handle submit takes any function of your choice that you pass in. Okay? So this is a function that we are passing in. It's arrow function. And whichever function you pass in is triggered after the validations and everything by react hoop forms. Okay? And also, if you see over here, you're on this field. You can see required colon true. Okay? So if you want this field to be compulsory, okay, then you can have required colon true as the attribute over here, okay? And it says, include validation with required, okay, and other standard HTML validation rules, okay? And you can display the errors this way. All right. You can see how errors are being displayed errors example required. So you have access to errors over here. Okay. So all of this is automatically taken care of, and if you scroll down over here, if you go to apply validation, you can see, these are all the validation fields. Okay, you can see, these are all the validation fields required pattern. If you want to do any sort of pattern matching. Okay, if you have some custom validation rules, you can do that. You can have minimum and maximum for a value over here or for a field over here. All of this, without writing much of a code, you just have to specify what you want and everything else is taken care of. Now imagine doing this in Vanilla JavaScript, right? Without using react hook forms. Okay, imagine doing this, right? So we already did this in one of these applications over here that you see. Okay, so I'm managing. I have this form over here, and I'm managing all the so let me full screen, and I'm managing all the errors and validations over here, error messages over here using these functions, okay? And, yeah, for just two fields, there's a lot of code there, right? So what I'm going to do is it's a very simple form that I already have. What I'm going to do is I'm going to trim down this form to make use of react hook forms. And things like validation and s will learn about all of that over here, okay? So yeah, that's something that we are going to cover. Okay? So what I will do is, first thing first, we need to install react hook forms. So you can copy this, okay? And come over here, head over to the terminal. Okay. And you can add this thing or run this in the root directory of your project. Now, once you do this, there will be a little bit of processing depending on your Internet connection, speed, and your system, but it should quickly get installed. I'll minimize this now. And if you come over here to package Jason, you'll see react hook forms being added. So let me over here. You can see react hook form, right? So this has been added to our list of dependencies. All right. And what we now need to do is we have a lot of functions created on handle change on submit, validate and all of this. We don't need all of this. I'm going to get rid of all of this. Okay? I'll just delete all of this. I'll just trim down this example over here, okay? On submit, we'll pass in something, okay? Value also we don't need. So this input field will also be trimmed down over here. Okay. Okay. So actually, I'll get rid of all of this. So here. Okay, this will be a very simple input field now, okay, input and oops. So I think I'll have a self closing tank. I'll get rid of this, okay? Okay. And I'll just have, in fact, let me do one thing. I'll just have the button over here, okay? Or I just have the labels. I'll get rid of these input fields over here. Okay? I'll just have the labels. Okay, so I have the label over here. I have the label over here. Okay, I'm getting rid of all the input fields. There is a submit button, which is needed to submit the form. That is it. I've just did a lot of cleanup. I'll just get rid of the input as well at the top. We'll do fresh inputs whenever we need, okay? I don't need handle submit as well, okay? Now, this is a form that I have pretty simple trim down version. Okay. I'll just remove this. There's nothing yet in the form. I've not added input fields. Okay? Now, first thing first, what we are going to do is we need to make use of react hook form. So I'm going to say Import, use form over here. You can see this suggestion. Use form from react hook form. So I'll just select this and you'll have to Import added. Okay. Now what you are going to do is we need, I'll say const. We need register, and I'll say use form over here. So using this hook, okay, I need to import or I need to get these two functions. So register and I'll say handle submit, okay? So these are the two functions or properties you can say. Okay. These are the two functions that you need access to, okay, from the use form. Okay, and that is what we are doing over here. So after having access to these two functions like register and handle submit, okay, we'll talk about them. So what is register? Okay? Why do you need register? So Register is a function that is provided inside the use form hook, which is provided to spy react hook form, and it is used to register the details that you want react hook form to handle. Okay? For example, if there is an input field, you might want to register that particular field with react hook form. And why you want to register? Because you want react hook form to manage the validation, submission, everything. You want react hook form to keep track of change in each input field and all of that. Okay so because of that, you would want to tell react to form that, hey, manage this particular field for me, right? How would you tell that? You do that with the help of register, over here. Okay? So let me add an input field over here. So I'll just say input over here, something like this. Okay? And I'll add a self closing tag. I don't need this. Okay. And over here, I'll say, I'll add colon sorry, not colon. These are round brackets. I'll say free dots and register. Okay. And here, I'll pass in Name, something like this. This is how you register. Okay? So this is done, okay? We have added register, and what you can now do is we'll have a on submit function, so I can say const on submit submit, I'll make use of arrow function over here. Okay, something like this and I'll say console dot log. Okay? Log. I'll say data over here. Okay? So this is a form data that I want to log over here. Now, handle submit. So we need to tell handle submit that, hey, use this function to handle submit for me. Okay? So what I will do is I'll come over here to form, I'll say handle submit Oops. So 1 second. I'll say on submit, first of all, on submit. Okay. And you'll say handle submit and you'll say on submit, something like this. Okay? This is done. Okay? Now, what will happen is whenever submission happens, ok, you'll have this function triggered with the data. Okay? Let us see if this is happening fine. Okay? Will check this. So I'll go to Console. I'll do hard or fresh. I'll clear this and I'll say test submit. You can see Name as test and how many lines of code you had to write. Okay? You just had to register this. First of all, before registering, you had to do some housekeeping importing reactor forms. You got access to this register and handle submit from use form, okay? And then you just registered name, and now you're getting the data over here. Okay? Now, email is not registered, so let me add email over here as well. Okay? So if I say email, okay. And this is email for me, okay. And if I don't register this input field, it won't work, but I need to register. So I'll say three dots, what is the syntax? I'll see register, and I'll specify email over here. I'll save this. The moment you do this, if you refresh, if I submit, you'll see name and email as empty. Okay? Now, whatever changes happen, okay, test and A, you'll see both appear in the data. Okay? You're hardly doing anything. You are not managing states, you're not doing anything. Okay? You have just said react hook forms that, hey, register this and handle this for me. Okay? Now, react Hook form is doing everything for me for you, essentially. You have on submit, you're saying handle submit. This is the handle submit from React Hook form, and you are giving the function that needs to be triggered on submission, okay? Because you might have a custom submission or custom way of submitting data, right? You might want to do a EPI call or something. So after all the validations and all are done, Okay, this function is called with the data. All right. So to put or to summarize everything, okay? Use form initializes the form handling with react hook form. Okay? That is what we do. Register, we are making use to register the input fields for form management. Handle submit does the job of handling the form submissions and gathering the form data for us. And on submit is a custom function that is triggered on form submission, and it does a simple job of logging the form data. All right? Now, there are a lot of benefits of using react hook forms, okay. First benefit you can see from this code is less boilerplate code. You don't have to write a lot of code to get your forms up and running. Less boilerplate code, and your component also looks simple, right? Better performance. Now, better performance means it minimizes re rendering on every value change. So if there is any sort of value change, if you're changing anything in the field over here, okay? In traditional form handling and react, what happens is the component is re rendered. But in react to forms, the component is the form is not re rendered every time you type in a field, and this makes your form faster, especially for large applications. Validations are made simpler. We haven't touched validations yet, but Things like checking whether a field is filled in, or checking whether email is valid. All of these standard sort of validations are in built. You just have to add one word, and you just have to tell react hook forms that, Hey, do this kind of validation, and that is it. It does for you, right? You don't have to write things manually for these standard stuff, right? So overall, it makes form handling very easy. It makes easy to collect form data, keep track of it, and you don't need to manually update State for every input field like you do with regular react forms. All right. So in short, it makes your life much more easy. All right? I hope you're impressed with react Hook forms, and, yeah, we will explore this a lot. And it is being commonly used. So you'll see this in a lot of projects as well. 5. Real-Time Insights: Monitoring Form Values with React Hook Form: Hey, there. So now it's time that we begin talking about watching values with react hook forms. Now, what does watching values with react hook forms means? So there will be scenarios wherein you want to keep a track of what value user is giving as an input as he types in, right? And you want it to be you might want it to be a bit real time, right? So this is where watch comes into picture. So what is watch? Watch is a function, as you can see on the example over here, okay? It's provided to us by react Hook form, and using this, you can watch any value, all right? Now, whenever you register a field, okay, you give it a name, right? So when registering, you say register this field, and this is the name of the field that I want to register it with. Okay? So here, in this example on the website, you can see input field is registered as example name, right? So what you do is you import the watch function over here, and then you say watch example. Now, whenever you type in anything in register over here in this register input, this will be triggered and watch will have the latest value of whatever you are doing. So it's basically keeping an eye of what's happening with that input and what value is coming in. Let's try this hands on to get a better understanding. So I'll switch over to our application. We have this simple application where we are making use of react forms. A couple of fields that we are using Input, name and input email. Okay? Now, name is registered with this name over here, and email is registered with the name email. All right? Now, how do we watch value? So first thing, the step one is we get watch inputed or we add watch over here, all right? And then over here, what we can do is I can say watch and over here, I can say name, something like this. I want to watch name. I can assign the value over here to a variable or let me just log the value. Let us see what happens. Okay? So I'll say Console. Oops, console dot log over here, and something like this. Okay. Let me just save. You can see undefined coming in. Okay. Now as a iPane you can see, watch being triggered. You can see right? Watch being triggered. Whatever I'm typing in, you can see, like the output over here on the console. That's watch for you, right? So this is watch. Now you have one more field over here, which is email, right? Now, even if email is typed in, okay? I'm typing in email over here. Okay. So there is no watch for email over here, right? So you might want to add a watch for email also, and you can do it using the same syntax, right? Now, rather than having the value of name being logged in this way, what I would recommend is you make use of use effect, use effect hook. So what I would do normally is I would comment this out. Okay. Let me comment this out. I would say const watched name over here, ok. And I'll assign this to watch and I'll say name. Okay. So we want to make use of use effect. I'll say const, watched. Email over here and I'll say watch email. So I'm watching both the fields right now. I want to do that. What I will do is I'll make use of use effect. Now there's a reason why I'm using use effect because I want to keep the logging of the value for names separate from my rendering logic, right over here. And using use effect is a good practice for all these kind of side effects. I'll make use of use effect. This is a syntax. I have A arrow function over here, like this, and I have E dependency like so. O This is a syntax. Okay. What we will do is over here within this particular logic, I'll say log over here, console log, and I'll say name value, name, and I'll say watched name, something like this. Okay. And I'll get rid of this and here I'll say watched name. So whenever watch name changes, this use effect hook runs and it prints the value of watch name. You can have one more hook like this, add it over here. Okay? And this could be linked to email. Email. Okay. So you can say watched email, watched email, something like this. Now, I'll refresh, you can say name as you can say I love, react. You see name is being printed over here. Email, you can say email at t example.com. So you can see how you're watching values and if you submit, you'll see the data being printed. Now, the question is what's happening? Okay. So the question actually is what's happening and why you would want to make use of watch. What are the real use cases? Okay? The first thing, when you are registering the field with the react hook forms, you are actually registering it using a name, right? Name over here is name and over here, name is email. Okay? So react hook form identifies this field as name and email. Now when you want to watch the values, you can import this or get this function from reactor form and you can watch it this way. Now, any sort of changes in the field will trigger this update over here, and this is completely real time. Okay? Now, if you want to display these fields, I recommend making use of use Effecto over here. Because that separates the printing of values then rendering logic, okay? Now, why would you want to make use of this? Okay? So first thing is number one thing is conditional rendering. So you can watch to conditionally render parts of your form based on the values entered by the user. Okay? For example, showing or hiding additional fields based on e selection. Okay? So this kind of thing, if there are different kinds of fields over here. So here we are having input. If you have select over here or a drop down or a radio button. Then you can watch the value as to what is happening. And depending on what the user is selecting entering, okay, you can conditionally render the form. And this is very real time even before the data is submitted. Right? So this is one use case. Live validation, you might want to have live validation over here as user is typing in the name, okay? And if he goes or tries to type in a number, you might want to show an error message immediately that, hey, number is not allowed. Like, name cannot be numeric. So all these kind of live validations you can do or you can show hints as user types in. So if user is typing in a title, let's say, title is a field. And if you types in very lengthy title, you can have a hint that, hey, this is beyond ten characters, okay, not recommended, something like that, right? It's not an error, but a suggestion to a user or a hint as to how you can improve the title in your form, for example, all right? Complex forms. So if you have any sort of complex forms, then watch can be used for multi step forms to monitor and validate the data at each step before proceeding and before even the form is submitted. So these are some of the direct use cases of watch, okay? And I believe you can imagine how useful this is, right? And it's super useful because it's pretty real time efficient, and it's super easy to use with minimal code. We have literally written very less code, okay. This code is literally for printing the values, okay? This is not needed if you don't want to print, but this is literally what it is. Okay, you just got watch and you're making use of watch function over here, right? I hope this is useful. And over here with US Effect, these two US effect hooks are separate because this is being triggered on watch name change, and this is being triggered on watch email change. All right. So I hope this is useful and I hope you have been able to follow along. 6. Seamless User Experience: Adding Validations in React Hook Form: So now it's time that we begin talking about validations with react hook form. Now, how does validation work? So validations work in a very simple way with very less boilerplate code, okay? And you can specify validation rules when defining the fields. For example, here on my screen, I'm in Get Started page of react Hook form, and over here you see this example. Okay, this is the first example that you see. This includes a basic validation. You can see. So it says, include validation with required or any other standard HTML validation rules. And you can see how it's including the validation. It is registering the field over here first. Okay? And then it's saying required true. Okay? Now, what does this do is it registers this field and it also tells React Hook form that, hey, this field requires a value. So user cannot bypass this field or submit the form without passing in a value for this field. Okay. Now, if the field is not filled in, or, like, any value is not found over here, and if there is a validation error, what happens is you get the error object, you have access to the error object, as you can see over here. Okay? Now, this error object is a part of use Hook form, and it's a powerful feature that is used to manage and display the validation errors for the form fields. Okay? So this object is going to keep track of any validation error that occur when the user fills out the form, okay? And each form field will have its own entry in the errors object, making it easy to identify which field has a problem and what is that problem. Okay. Now, how does it work? So when the user submits the form. So here I have registered validation as true. Okay I need required true, and I have the errors over here, okay? Now, when the user submits the form, the react to form checks the input values against the validation rules you said. So this is a validation rule that I've set over here in this example, okay? Now, in this example, we require this field not to be empty and user submits an empty field. So the validation error is triggered and the error object over here is updated, okay? And the validation error message is being added over here. Okay? And that is being displayed over here. You can see? So errors dot example required. So if this has any value, then display this error message. You can see how it's being displayed. Okay? So this is how you can make use of validations over here. Okay? So let me give you a gist over here. Okay? Now, I'll switch over to our code base. Okay. And here we have a very simple form. We are registering two fields over here. Okay. And these two fields, what they are doing is basically they are input fields like name and email over here. Okay? Now, what we would be doing is first, I would come over here. When registering the email, sorry, not email, I'll register the name over here. When doing registration, as per the syntax over here, you can see the syntax. When registering, you pass in one more parameter with the validation rules, right? So I'll simply copy this. Okay. You can copy this from here. You come over here and within this, you can paste it. Okay? So required is true over here. Okay? Now, once this is true, you need access to the error object, right? So you can say form state over here, form state, cool in, and you will have errors, something like this. Okay? So this is something that we have now, right. And now what you can do is outside label, okay you can have errors being displayed. Errors taught, you can say name, Okay. So name because what is a field name? The field name is name. Okay? So you can say error dot name, and I'll display the message over here. Okay? So I can say P, and I can say name is required, something like this, okay? I'll save this. I'll hit refresh. Okay? If you submit, you'll see name is required, right? What did we do for this? We just added a property we just got access to the error object, and we are conditionally displaying the error message. That is it. That is it. It's that simple and it makes the boilerplate code. It cuts down the boilerplate code, okay? So you don't have to write a lot of boilerplate code over here. You just have to tell what needs to be done and everything else is being taken care of. Okay? Now now in this example, how it worked is when registering, we said, this is a field that we are registering with the name name, right? So what happened is the errors are registered in this name over here, the field name. So the field name is name, here the field name is email. Okay. So based on that, the errors are being registered over here, okay? And they are being displayed conditionally with the help of logical and operate over here. Okay? Now, that's how it works, okay? Now over here, we are actually saying required true. But what you can do is required true has a default error message over here, right? What you can do is let's say error dot name dot message. Let's see what is the message that we get to see. So you can see we don't see any. Okay, I need to actually wrap this. Like so. Okay? So this does not exist, okay? Now, what we can do is here, instead of saying, Okay, it's not error. It's errors. I'm sorry about that. Okay. So let me refresh. If I submit, okay? There's no error message that you see. Okay? Now, you can set a custom error message over here when registering required. So you can say name is required, okay? And you can save this. Instead of true, you are passing in the error message. And if you submit this, you'll see the custom error message will be displayed, right? So this is how you can also do things. This is also one example in which you instead of passing in true, you pass in the error message itself and you display the error messages this way. All right. So this is a way of doing things. Now, apart from required, there will be scenarios wherein you want additional sort of rules or you want to have complex validations. So if you come over to the website of React Hook Fm, here on the left hand side, navigation, you have to apply validation tab. Click on this, and here you will see a list of all the validation rules that are supported. You can see minimum length, maximum length, all of this, okay, you can work around with. You can see first name, or maximum length is 20. Minimum length you can set depending on how you want to it. Okay. So here you can come in and here you can say required, okay? Uh, you can say required, name is required, and I can say minlength, M length, and I can say min length of two, for example, okay? And then over here, I'll switch this to the Boolean value. I'll remove the message, and over here, I'll have the message as okay, I'll say name is required and should be at least two characters. Okay? Something like this. I'll save this. And now, if you refresh, if you can say S, you can see name is required and should be at least two characters. If I type in S again, you'll see the form being submitted. Okay. So yeah, this is how validation rules are working. And without this, also, if you don't put in any sort of name over here, you'll see this validation being triggered, right? So this is working absolutely fine, okay? You can also do this for email as well, okay? You can say required is true over here. Okay. Required is true, something like this. Okay. And, oops, so this has to be dici prices. Something like this, okay? And here, you can say, instead of errors dot name, you'll have over here. Errors dot email, something like this. Okay? So email is required, you can say. All right? Email is required, and you can get rid of this and you can save this. And now, email is also required. You can see name is required, email is required. Okay? You can add CSS styling as well if you wish to, all right. But this is how it will work. And you have additional things like pattern matching. Okay, you can do a pattern match. You can see over here, pattern matching in action, you can specify the pattern that you want to do, and this could be really helpful for emails. Okay. So if you have a email over here or email pattern that you want to validate it against, then you can run that as well. So what we can do is for email, we can have this sort of pattern. Okay, so I'll come over here. Okay. I have required email over here. Okay. Required, I have specified to. I'll say pattern, something like this, I'll have this and I'll specify this pattern. I'll piece this pattern. So this is a pattern that is there for email validation. Okay, I added this pattern. You can do some normal Googling and get this kind of pattern, okay, or I'll share this code with you all for this. And if you save this, okay, let me refresh. If I submit, email is required. I type in this, I type in this. Still, email is required. You can see email is not valid. So if I type in this, okay, email is still not valid. I can say.com, and then it should work probably. You can see the error message went away. So this email has to be valid, only then it'll work. All right. So this is a Javascript pattern for validating emails, and I search for this and I got this over here. So one thing I want to highlight for name over here, you see this complete message that name is not name is required, and also it should be two characters, okay? But here, I just want to highlight the message that it should be two characters. And if this is empty, then I want to highlight like name is required. Okay. So depending on what error user is making, I want to highlight that error message. So that is also possible. I'll show you how that can be done. Okay. So over here, what I will do is, I'll just comment this over here. Okay. I'll duplicate this, okay? Because I don't want to delete that one. I want you to have access to that. Okay, now over here, I have to register. Okay. Now within register, I'm passing in required over here, required like this. Okay. Required is true. Minimum length is two. Okay? Now, I had told you that instead of required, what you can do is you can pass in you know you can pass in the message over here, okay? Wait a second. I'm getting an error. I don't know why. 1 second. Oops, I missed the closing braces over here. I didn't copy that. All right. That's absolutely okay. Happens. You know, I'll just close it. Okay. Yeah. So when using required, you can specify the error message. So I'll switch back to that method. I'll say name. Oops. I'll say name is required, something like this. Okay? Now, how do you specify that for length? Okay? So I'll have this over here. I'll I'll get rid of this message. I'll say error, tot, name dot message, okay? I have this now. Okay? So it's not error, it's errors. Okay. Remember to have the right object name over here. Okay. Now for this, what I can do is I can have a key value pair again mentioned over here, instead of two for a minimum length over here. Okay. How this will work is I can say minimum length. I'll get rid of two over here. I'll add curly pass over here. And I'll say value. Okay, there's a value property, I'll say 20. Okay. And I'll say message over here. What is the message you want to have, okay? I want to have message as name should be at least two characters. I'll copy this message. I'll say name should be at least two characters. Done. Save this. Now refresh, and now type in a, I'll say a at ate gmail.com. I don't want to see any error messages for email. So a@gmail.com, if I submit, you'll see name should be at least two characters, right? If I remove this, name is required. Name should be at least two characters. If I type in completely and if I submit, it should be at least two characters. Oops, I made this 20. I'm sorry. I'll save this again. If I submit, you'll see the data being submitted. But if you reduce this, names should be at least two characters. If you remove this, name is required. You can see how dynamic this is. This is another way of doing things, okay. I'll zoom out a bit, or I'll just go full screen. Okay? You can see name and message. Let me take this to in line. Let me bring the closing over here. Okay, you can see how this is structured. So you are registering over here, registering the name. You're saying required, name is required. Okay? For required, this is a message you are having, okay? For minimum length, you are saying the value is two, but I want to have message also. So you have this passed in as a object, which is key value pair over here, okay, you can see, and it's now taking an object with multiple validation rules. Register is actually having the first parameter as the name of the field, okay? Second parameter is actually a object over here. This is the entire object, me. So from this collibrase to this collibrase. It's the entire object that is being passed to register as the second parameter. And within this, there is this also, minimum length, where we say value is two and name should be at least two characters. Whatever error message comes in, that is being displayed over here. And you can see how dynamic it was, okay? These are all standard rules people, right? Minimum length, maximum length, all that you see over here, minimum length, maximum length, okay, Min max, pattern, you know, validate. So this is maximum and minimum required. All of this is standard, right? Why would you write code for this across your application across every field in every component. So if you're using if you're building a Farm heavy application, imagine how cumbersome it will be for you. Right? And imagine making use of react hook forms in a form heavy application. Imagine doing that, okay? So it provides all the flexibility. You can validate things this way, okay? You can even validate things this way. Okay? I don't want to pass in message. I want to have a standard message for all the validation rules. You can do that. I've shown you how you can do that, right? So that's the beauty of react Hook forms. It's really an amazing way of managing forms in react. All right? I hope you're enjoying this and I hope you're finding all the knowledge that you're gaining with this lecture valuable, okay? So react Forms has built in validation rules like minimum length, maximum length, all that we see over here, okay? You can also have custom valid functions for complex validation logic. Like, if you think you need something beyond this, you can write your own functions. Okay. But that is for beyond this, right? You can do error management through the error object. Okay? You have access to the error object and you can play around with the error object. Performance, react to form is optimized for performance, especially with larger forms. All right. So I hope you're finding this useful and I hope this is valuable information for you all. 7. Speed Matters: Comparing Performance of Basic Forms and React Hook Form: So let us now compare the performance of normal form or basic form that does not make use of react hook forms. So I have the code for a basic form over here, and we are not making use of react hook forms over here. All right. So one thing, I forgot removing this input. So this is the input for react hook forms. So in this particular form, we are not making use of react took forms, like I said. It's a very basic form with email, name, and we are making use of on handle submit and on change event lesna over here, and value is like binded to this state over here. Okay. And you have this huge effect hook so that we can keep track of when the form is actually rendered or how many times this is re rendered, right? So I'm not making use of dependency array over here, and because I'm not making use of dependency array, this will be triggered on every re render. And I have this on handle change, which is making sure that the value is updated in the states for every change. And I have this handle submit to handle the submit. So now coming to the build over here, if I refresh, you'll see basic form rendered twice, and this is, of course, because of strict mode. Okay? So that's absolutely okay. I'll zoom in a bit. Okay. Now, I'll come and type in over here something, so I'll say I you can see, every time a type in, I love react. Every time I type in, it's re rendering the form. So it's re rendered itself 14 times as I typed in 14 characters. Okay? If I type in email, it is going to re render itself again. You can see. And it's not performance efficient. If I submit this, okay, I get an error, but let me remove this and let me submit. You can see the data is submitted but after a lot of rendering. So this is not optimized for performance. This is not good. There is a lot of rendering that is happening, which can be avoided. Okay? Now, this same example, what we can do is we can make use of react hook forms and react hook form can manage this in a lot effective and efficient way with minimal code. So here you are writing so much of code. You can see almost 50 lines of code, but this can be minimized with react hook forms. Now over here, I have converted this example into react hook form. I'm making use of react hook form over here, you can see, and very less code. And here I have two fields, name and email. I'm registering these two fields and I have a use effect hook without a dependency array again to print hook form rendered. I have on submit function as well, which is being passed this way over here. Let us see how the rendering works over here. If I come over here, you can see react hook form rendered twice. Of course, this is because of the strict mode. Now if I type in, I love react. Okay. You can see there is no re rendering that is happening. Okay? You can type in email as well, mail.com and you can submit the data. You can see there was no re rendering that happened. So this is much more efficient. React ok form minimizes the rendering over here. It does not re render the component, and that's the benefit of making use of react hook forms. Now, this difference of rendering matters a lot. If you're building large complex forms, complex onboarding forms or complex forms in your application and your application is form heavy. Then this would matter a lot in the longer run, wherein if you're making use of basic form, first of all, you will have a lot of boilerplate code. It would be tough to manage. There is a lot of re rendering, and performance is not optimized, right? But with react hook forms, you can see less code. Okay, you have to write less code. A lot of boilerplate code is cut down, and react Hook form provides performance benefits by reducing unnecessary re renders, making it more efficient for handling forms, especially in your use case where you are having a larger application. All right? So I hope this was useful, this demonstration, and I hope this gave you some good clarity as to the difference and the importance of basic versus react forms. And I hope you gain knowledge as to how react forms are important and they add value. 8. Reset and Refresh: Mastering Form State Management: So now it's time that we begin talking about the reset functionality and how can you add reset functionality using react Hook forms? Now, reset is one of the functionality that you might want to offer over here. So here in this particular form, you might want to have a reset button. And also, once the data is submitted, you might want to reset the form and you might want to clear all the values so that user can start with a new submission if he wish to. All right. So how would you do that? So with react Hook form, it is as easy as calling a function. So React Hook forms offers this reset function which you can add over here, okay? And you can make use of it. All right. So what I will do is on submit, we are logging the data. Okay? So I have this very simple form, which has name name is registered to the react took form with this validation. You have email over here, which is doing these validations over here, and then you have errors also that you are displaying, and you have one button which is submit. And you are handling the submit this way, you're just logging the data. Okay? Now on submit, I also wish to have the reset, the data to be reset because what happens right now is if I submit, if I say A and if I say A at chmail.com, Okay. Okay, so I can say and I'll say ABC. This is not resetting the form over here, really, right? So what you can do over here is I would reset the form. Okay? So what I would do is I would add a pair of curly pres first of all. Okay? This is done. And then here I would call this reset function. I'll say reset. And I'll say, I'll call it this way. Okay. And this would reset the form after the submission. So what you can do here is, okay, I can say test, and I can say test at mail.com. If I say submit, it clears all the value and it resets the form. You can see the submission is done and the value is cleared. Okay? You can additionally add a button as well. So here, the button is being added, which is used to submit the form over here. Okay. What you can do here is you can create a reset button. You can say reset over here. Type is a button, so I'll select this. I'll say button. And you can say on click over here, on click, you can add arrow function and you can call the reset. So you can say reset and you can call this over here. Okay, something like this. This is a reset button. Now, what would happen is if you type in anything, Okay. Oops, sorry. So if you type in anything, you can reset, right? If you type in anything over here, anything over here, you want to reset the entire form, you have this reset part. Okay? So this is a benefit of reset over here. It's as simple as doing a function call over here and clearing all the values. You can do the function call from your Jascript function over here that you're defining, okay on submit function, or you can even do it using this, on ClickList now. All right. So I hope this is useful and I hope you gained some information from this. 9. Tailored Feedback: Creating Custom Validations in React Forms: So right now, I have a form, which is making use of react hook forms, and I have a couple of fields in the form like this is a form. I have name, and I have email as well over here. Okay? Now, the validation that I'm using over here are pretty much simple. Like, I need name to be required, and the minimum length requirement is of two. Here, the email should be required, and this is a pattern that I want to match to find out whether the email is valid or not. Okay? So this is a validation that I already have, okay? Now, these validation that I'm having are common and standard validations, right? When you're building forms, there will be scenarios where you want to have some sort of a custom validation logic into your form fields that is custom to your application. Okay? Now, in that particular case, there is an option called validate that allows you to add such custom checks into your forms. Now, for example, let me give you an example here. Let's say I want users having name Edmin only to submit this form. Now, this is a custom check that is specific to my application, and it's not something common or generic, right? So how would you add that over here? So this is where validate options comes into picture. Okay. So validate option takes function that returns true, and it returns an error message if the validation falls. Okay? So true is return if the validation passes. All right. Now, let us see this in action. So let's say in this particular form, I'll take the same example where a wage to check if the user or the user is having name as Edmin. Now, how you can make use of the validate option over here is you come to input, you say over here and you can say validate, validate as the option over here. You can have key value pair, and you can mention the function name over here. Okay? So what is the function name? Okay? So we can create a function over here. Okay, I can say const validate name over here, and this gain have value as the parameter. You can have something like this, and then you can say if value. Okay? So you can say if value is equal to o admin. Okay, or if you say if value is not equal to Admin over here. Okay. Oops, I value is not equal to Admin, then what you do is return. Only admin is allowed. Only admin is allowed, something like this. Okay. Depending on your requirement, you can send the kind of messages or you can craft the messages depending on what requirement you have, but I'll save this so I have this created now. Now, you come over here and you say valid name, something like this. Save this. You come over here and let us refresh. If you come over here and if you type in AD, I'm not typing in Admin. Okay, and I have a valid G mail. Okay. Valid Email over here. If I submit, you'll see only admin is allowed. Okay. If I say Admin over here, admin. Oops, Admin and if I say submit, you'll see the error is gone and you can submit the form. All right? You can also have the logic to say that admin is not allowed, okay? So you need to reverse the condition. Admin is not allowed over here. Okay? And you can reverse the condition, something like this. If it's equal to Admin, then don't allow Admin. Okay? So if I say Admin over here, Okay. All right. Admin is not allowed. You can see. All right. So this is how it works, right. And I hope you have a twist of how this works. You can even shorten this like you don't need this separate function over here to be there. Okay. So instead of that, instead of writing a separate function, what I'll do is instead of calling this function here, okay, I can say over here, okay, I can write a function over here itself in a shorthand way. I have this value, okay. I'll make use of arrow. I'll say if value not equal to Admin over here, okay? Then in that case, you write Admin is not allowed. Okay, something like this. So this will work in the same way. All right. You can see Admin is not allowed, right. So this will return true. Otherwise, it returns this message. Okay? So that is how this thing works over here and you can get rid of this function if you need to. Okay? I'll just comment this out. If you come over here, okay? You can say admin over here and you can try to submit. You can see admin is not allowed. All right. And yeah, this is working absolutely fine. All right? So this works, okay? And here, I had given you an example. Okay? So here what is happening is here we are passing in the message, okay? Now, if errors dot message is not found, you're showing this custom message. Okay? What you can do is you can have multiple validation rules in this single option. For example, here you are checking if the username is valid or if the username is admin or not, or if the name is valid or not. Sorry, not the name is valid or not. You're checking if the name is admin or not, right? If the name is not admin admin, based on that, you are displaying this message, right? So what you can do is you can have more over here, okay, not one. Okay? So what I can do is I can add this can be a sort of object over here that you could add, all right, and something like this. Okay. And you have over here. So this can be named okay? You can say not admin Okay. Like so. And this is one check. Okay. Let's say I want to add one more check, right? I want to add one more check, is not number, okay? So I don't want users to enter number in the field. So what I can do is I can say value again. What is a check? I'll do like this. I'll say is N N, is N over here. Okay? And I'll pass in value. Okay. And I'll have this message over here. Name cannot be number. Okay? And I'll end this with a comma if I need to. Okay? So you can end this with the comma or it's not needed, actually, this is the last one. Now, I also want to tell you that I hope you are clear about this shorthand way of doing things. So we are making use of conditional expression over here, the conditional or, and you can see over here if the value is not equal to admin, okay, checks if the value is not equal to admin. Okay? And if the condition is true, the expression returns true. So this expression would return true. And if it's false, then this would be returned. Okay. So similar way, this checks for if this is true, then this would be true would be returned, and if false, then this would be returned. So here, you can test this over here by entering numbers over here. You can see name is required and must be at least two characters long, okay? Wait a minute. I can actually type in now and I can submit. Okay. It's giving me an error over here, ok? And let me check what the error is so the error is simple one. I did a typo over here. The, the last N is caps over here, something. Oops. Sorry. So last N is caps, something like this, okay? Save this and you come over here to refresh. Okay, and type in three, four, you can see, name cannot be a number. Okay? You can add one more, okay? You can add one more if you wish to. You can add as many as you want. Okay? These are all custom validation rules. If the rule is complex and it's not fitting in over here, you can add a separate function that checks for this, something like this, and you can link that function over here. Okay. So all of that is possible over here, okay. But basically, I want to highlight like this is a way in which you can add custom validation logic, okay? And validate option allows you for a detailed custom validations beyond simple checks. And this feature is helpful in scenarios where inputs need specific formats or conditions that aren't covered by generic stuff like required max length that exist by default in react hook forms. Okay? So apart from the default ones, react hook forms gives you a lot of flexibility in creating your own custom logics as well and that too in a cleaner and in neat way. All right. I hope this is useful and I hope you are able to follow along. 10. Beyond Basics: Implementing Sophisticated Custom Validations: So we will talk a bit more about the validate option and learn how you can add custom validations that are a bit more complex into your application, right? So far, what we have seen is with validate option, you can actually add these kind of validations, okay? You can have custom validations that are custom to your application or domain, right? So here we are checking if the user is admin or not, and here we are checking if the user is entering number or not in the name. Both of them should not be allowed and they should be handled appropriately depending on what condition you set, all right? So we have both these condition checks over here. There will be scenarios, wherein you might want to add more. So you can add more stuff over here by adding comma in the end and you can keep on adding more entries over here in the validate option. Now, let's say you have a scenario wherein you want to perform asynchronous validation. Now, what does this asynchronous validation mean? So asynchronous validation means you want to do check with the back end, right? You might have a backend server, you want to check something in the back end and then show the validation error message to the user. How would you do that? So that is possible with the help of validation option itself, like validate option itself. Okay? So let us say here in the scenario, we have name and email. Let's say I want to check name, Let's say this is not name, let's say this is username and I want to check and validate this with the back end, whether the username exists or not. Okay. So how would I do that? Okay? So what you can do is you can have a check or asynchronous function over here. Asynchronous check is what I would say, okay? And using that, you can perform Asynchronous validation, okay? So let me do that. Okay. So what I would do is over here, I would come here. Okay, I would say comma, I would say, validate, and validate is already added, so I'll say check user name. Okay. And over here, I would say value or I'll say value over here. Okay. And I would have D logic. Okay? Now, logic will come like this over here. Okay. But this is now doing a check with the back end, right? So we will have to mark this as sinc. Okay. Now let me show you how you can do that. So let's say I have const, Okay I have this Pollan value exist, which I'm getting from check if user name function over here. Okay? Check if username, and it is getting value as input. Now what is check if username? Okay? So let me add check iff username over here. Okay? Now, over here, I can say function. Check I use a name. Okay. What is the parameter? It accepts? It accepts the parameter as so I don't want to pass parameters right now. Okay I'll have this defined using arrow function, so I'll say is equal to, okay. And wait a minute. I goofed up the syntax. So I'll say a sync. Check if sorry, not a sink. I goofed up the syntax. Let me delete this. Okay. So this will be const. Check if use a name. Okay. And I'll call this exist because check if username exists sounds better. Okay? So I'll just replace this over here, check if username exists. Okay. And here, I'll mark this as async function, okay? And I'll pass in username, like so. Okay? Because value is being passed over here, so that's nothing but the username. And I have the check over here defined, okay? Now what I can do over here is I can have a simulated check to the back end. I can say const exist. Okay. And here you might have an EPI call that you might do, okay? So here you might have the code for the EPI call, and that might return a boolean result, okay? Or you might process it and get the Boolean value, right? So totally up to you. But what I can do over here is you can actually so what I'll do over here is I'll simulate backend check. I can say wait. Okay, and I can say new promise over here, okay? And I'll say resolve over here. Okay. So I'm just creating a promise. I'll say set timeout, and I'll say resolve thousand. I'm doing a delay of 1,000 milliseconds over here, simulating a delay. And I'll say return. Okay, I'll say return, and you can return a Boolean value over here. Okay? Now, what boolean value can you return? So what I can do is I can over here have a static list. Okay, so I'll have a static list of existing user names. Okay? This is a static list, and it's an RA, I'll say Admin, I'll say user, one, two, three, and I can say, you can add one more. I'll sich on, something like this. Now you can say return, and I can check if exists. Okay? And sorry, I can return what I'll return, I can say existing username. Okay, dot includes, I'll say user name over here. So this is a username that I'm passing. Okay? So what this is doing is, I have a static list of usernames. Of course, this won't be the case in your case because you might do a backend API call over here, okay? So what I'm doing is I'm having a starting list of usernames, okay, and I'm checking the username, like if the username that user has entered exists in the existing username. If it exists, I'm returning that check value. That is a boolean result I'm returning, okay? And before doing this check, I'm simulating a delay over here of 1,000 milliseconds. All right. So this is like a simulated API call over here, right? And here, since it's a sink, I'll say a wait because it's returning a promise over here. And since this is a wait, this becomes a sink. Right? So I hope this is making sense now as to what is happening over here, okay? And over here, I can say return not equal to exist or you can say username already taken. Okay? So username already taken, something like this. All right. So you have this kind of a message being sent. Save this. Okay. Let us see how this works. Okay? So I'll do a refresh. So the username that we have is John, one of the usernames, I can do John. I can say submit. You can see after a bit, you could see username already taken. I could increase the delay also. Okay? That is possible. I can say John one and e at rate gmail.com. So since this username is unique, it will work. Okay, you can see it got submitted. Okay. So this is how asynchronous validation works. And this is not just static validation, but if you want to do any sort of checks or validations with the back end, you can absolutely do that, right? And now you can imagine how powerful this can be. Okay? So if you're working in a real project, you have EPIs running, you need to validate something by calling some EPI, you can absolutely do that, right? You can even do dependent validations, okay? So dependent validations, like I'll tell you, let's say you have a password field and a confirmed password field, right? Now, now what you would want to do is when a user types in the password, you want to check it with the other password field, and if it's incorrect, you might want to trigger a message that password do not match. You might want to do that, right? So that could be another use case over here. So what I would do is here, I have a label. This is second label after this label and after this error message over here. Okay? What I can do is here, I can add a label. Okay, I can say label, something like this. Okay. And I can say password, like so, and here I can say input over here. Okay. And input could be type password. Okay, type is password, and over here, I would say, okay, over here. I would say register register this. Okay? And how would you register this? So you would register this as password. So I'll keep B small password over here. Okay. And I'll say the required, it has to be required. Okay? I can pass in all of that, required field and required validation, but I won't do that. Okay? I'll just keep things simple. Okay? So this is done. All right. Or if you want, I'll just get the validation from here. Okay. So yeah, this is the validation that I'll add over here. So yeah. This is it. Okay. And this closes the required over here, registered. Register is closed. Okay, this is closed, register is closed, and then you have a closed curly braces. Okay? And this is it. We are seeing an error over here. What is the error about? Let me see. So I don't need this validated option, so I'll get rid of this. Okay, I'm going to keep things simple. Okay. This is all I need, right. So pretty much it. Okay. And now, what I can do is I can have this field duplicate. Okay. So this entire field duplicate it, and you can have a confirm password over here, right? This is confirm. Okay. And instead of type password, this is type password. Instead of password over here, I can have confirm password. Okay, something like this. Okay. And you have minimum length over here. Okay, I'll get rid of this comma. Okay, minimum length. Now minimum length after minimum length, what you can do is here, you can add a validated option, so you can say validate. Now, this password field should match the confirm password should match the password, always. So you can say value, okay, arrow. And you can say value is equal to watch and Oops. Watch is not imported, so I need to import, watch, Watch, I say uh, it's not allowing me watch and I'll say password. So this is watching the password, and it is returning its value, okay? And if this is true, that's okay. If it's not, then you send a message which is passwords do not match, right? Passwords, do not match, something like this, right? This is done. We need to get watch in. Okay, so watch is not added yet. We'll get an error, otherwise. So I have done this and you can come over here. Okay. Form is looking not that great. Form is not looking that great. But let me add some BR tags and let me align this in a single pro. So after every label, I'll add the BR tag. All right? That should be okay for now, we're learning, right? So yeah, we have the form ready. Okay. You can see if I submit, you'll see all the validations trigger, right? Okay. And you can say test. You can say A, at the rate gmail.com. Passwords, you can see, one, two, three, four, Okay, one, two, three, four, five, six. Okay, I entered six. And over here, I'll enter some other value. Okay? And if I say submit, okay? Let us see what happens. Submit did not trigger anything. Okay? That's weird. All right. What's wrong? Let me see. So the validation is not triggering maybe because I've not added the validation error messages. Okay, I should have added that. So what I will do is here after the label, you are showing the error messages, right. So here after the label, I would add the validation messages. So errors, sort, confirm password. Okay. This is a field name. Okay. I'll say confirm password, something like this. Okay. And over here also, just after the label, I'll add the error messages. So you should see the error message now passwords do not match. You can see how it works. So now if I change this to one, two, three, four, five, Okay. Okay. Let me see. Five. Okay. Did I type in one, two, three, four, five, one, two, three. Okay. So let me try again, one, two, three, four, five. Okay, here, one, two, three, four, five. I submit. Okay, you can see the password error message is not being triggered. Okay? So it's working fine, right. And this is how you can compare or watch or create validations that are dependent on some other field. So here, the confirm password field validation is dependent on the password field, right? So this is known as dependent validations is what I call it, right? So this is about it. And now one more thing I want to show you. So now what is happening is if you submit at that time, the validation is triggered, right? There will be scenarios wherein you want to trigger the validation on change or when the thing is being typed in, right? When the user is filling in the form. So it should be real time. You can do that real time thing with a small change. So what you can do is you can come over here. And when you are creating an instance of use form over here, okay, here in use form, you can add a you can add a CO prese, ok and here you can specify mode and you can say on change on change. You can see on bl there were quite a few options, okay? Quite a few options on blur on change on submit, I'll say on change. I'll save this and now see the magic, right. So here I added. You can see name is required and must be at least two characters long. You can see. Okay. Afill in name, Okay, the validation is done. A, at the rate gmail.com. Okay. Password. Okay, one, two, three, four, five. Okay, one, two, three, four, five. Okay. You can see. Six. Okay. So you can see how the form is working real time now, and this is all because of the single change. I added this key value pair over here as an object when creating the form, right? So I hope there has been some good learning over here on form management with react hook form, right. I hope this has been useful and I hope this gives you the ability to create your own forms in a very much robust way with efficient performance and a lot of features by reducing a lot of boilerplate code, right? So that's react hook forms for you, and that's the custom validations for you. I hope this was super useful. 11. Course Conclusion: And that brings us to the end of this transformative journey into the world of react hook forms. We have dived deep into how react hook form can be a game changer for managing forms in react applications. We've explored a lot of things when it comes to form management in react. We have learned how you can address common issues, and we have seen the power of react hook forms. So just to give you a recap of what we have learned, we have learned how you can watch values change dynamically, implement validations, enhance the performance of your react applications. Which have forms, of course. And we have also compared basic forms with react hook form so that you understand ground up as to how react Hook form can be a game changer. So I hope this course has given you a different perspective of form management into the world of react. But remember, our exploration does not end over here. The power of react Hook forms lies in its flexibility and ability to adapt to wide array of form handling tasks. And I encourage you to continue experimenting, exploring and push the boundaries of what's possible with this tool in your projects. I'm excited to see how you will make use of react hook forms into your project because this is going to supercharge your form management process. And remember, innovation and efficiency is all about embracing new tools and techniques, and react Hook form is now a vital part of your react tool kit. Thank you for being a part of this course and thank you for being such an engaged group of learner. I hope this course has not only equipped you with new skills, but has also inspired you to think about form handling from a completely different perspective. With this class, you will find a class project that you can complete and submit it in the project section. Happy learning, wishing you all the very best.