React Hook Form - Complete Tutorial (with Zod)

React gets a lot of things right. The solutions  that it provides and the paradigm shifts that it offers us when building web applications  work really well. But, unfortunately, nothing is perfect.

There are some things in  React that if you try to do them natively, without any sort of third-party library, you're  not going to have such a good experience. One of such things is forms. If you try to build a form  natively in React, oftentimes you end up spending more time trying to prevent the default behavior  rather than encouraging it.

So, in this video, I'm going to show you an alternative to building  native forms in React. It's called React Hook Form and it's a form library that makes it really easy  for you to build complex and performant forms in React. Let's get into it.

All right, let's begin.  So, first, I want to talk about and show you why you would want to use a form library like React  Hook Form in the first place. So, here what I have is I have a component that renders out a  very simple form.

It just has an email and a password field. This is the JSX that is rendering  this form. You have the HTML form right here, you have the HandleSubmit function, and then you have  your two inputs, one for the email and one for the password.

The code that's running this form is  actually quite simple. You have two states here, one for the email, one for the password. These are  getting sent to the actual inputs to update those values.

Then you have a state here for the errors.  This is a simple object with just the email and the password as properties. And then you have  the HandleSubmit function, which will take the actual form event, will first prevent the default,  then will set the errors to null because this is a new form submission, and then will perform some  very basic, simple manual validation, like just checking that the email has an at symbol.

And  then if we get here to this part of the code, we consider the form validated, and then we  console log form submitted. This is what the form looks like. You have your email and password  field.

If I press submit, we get here this error that basically shows that the email must include  an at symbol. And then if I just add the at symbol and I put something here, and I submit it, we  actually get a log in our console that says the form has been submitted. This form works. 

Now, if you look at this code, just like this, you might ask yourself, why would we even need a  form library? I mean, this works just fine. And you're right, it does.

But the thing is, this is  a very simple form. This only has two properties, the email and the password. And for simple  forms like this, I actually wouldn't even recommend that you use something like React hook  form, because it's overkill.

For a simple form like this, doing it this way is completely fine.  The problem, however, is the fact that this form doesn't scale well at all. This is a very simple  form.

And for simple forms, this works. But as soon as you want to add any sort of complexity  to it, even just adding more fields here, this starts to get very complicated very quickly.  For every new field that you want to add, you have to basically add a new state property.

You have to  manage that field. You have to manage its updates. You have to then pass it to the actual input. 

So you would have to add another input as well, add another onChange property here and the value  here. And if you have a form with like 10 inputs, you can quickly see how much code you're going  to have to write just to get that working. Also, any new field that you add, you have to also  remember to put it here in this arrows object, which also means that you have to put it here  to make sure that it gets reset properly.

And then you have to handle your own validation. Even  worse, let's say that instead of console logging that the form is submitted, you actually want to  take its data, send it to a server and await the service response, you would want to turn this into  an asynchronous function. Well, if you did that, you would also probably want to show something  to the user as this form is being submitted to display some UI that something is happening.

You  might also want to prevent this button from being clicked while a form is submitting to prevent a  form from being submitted multiple times. To do that, you would have to come here and create  your own loading state. You would then have to make sure that you're properly handling the  loading state inside of this function here.

So that means setting it to true before the form  submits and then setting it to false after the form has submitted and got a response back from  the back end. And you can quickly see that this is becoming very complicated and you have to write  a lot of code just to get a form to work. And that is why you would want to use a form library like  React hook form.

React hook form allows you to do all of this and more with a lot less code and a  much better development experience. So now let's actually get rid of all of this code and let's  reimplement the same form using React hook form. So first I'm going to delete all of this code  because I'm not going to need it.

Then in the form here, I want to get rid of this on submit  function. I want to also get rid of the value and the on change on the inputs. And I'm also  going to get rid of these errors here.

So let me do the same for password, get rid of this, and  then we can get rid of this imports here because we no longer need them. Now we just have a simple  basic form without any functionality. To create a form with React hook form, we're going to make use  of the use form custom hook.

So we'll come here at the top and we'll import use form from React hook  form like so. And then inside of the component, we're going to come here and we're going to write  const form equals use form like so. This is the most basic version of use form.

Now if you're  using TypeScript, there's one more thing that we have to do. If you're not using TypeScript,  it's totally fine. You can just skip this very short part.

We're going to define here the types  of our actual form fields. So we're going to do type form fields, and that is going to be equal  to email string and let copilot complete the rest. We're also going to have password string. 

So these are going to be the actual form fields that we're going to use within our form. And  then we're going to take this form fields and we're going to give it as the type of use form  like this. We're going to do form fields.

And so this will make it so that whenever we work  with anything form related in React hook form, we're always going to have this properly typed.  The next step for us to do is to actually connect this form element here and these inputs here to  React hook form. Because just by writing this code, it's not enough.

We actually have to connect  all of these inputs and HTML elements for them to be able to work with the form. And the way that we  do that is we're going to make use of the register function that we get by accessing use form. So  I can actually destructure this form variable here and I can do register this function.

I can  use it on an actual input and then register that input with React hook form. So I'm going to come  here and start by registering the email input. So I'll come here.

I'll do curly bracket dot dot dot  register and then call this and then give it here the actual field. And because we have properly  typed these fields, we get here auto completion, email or password. I'm going to select password. 

And now this input field has been registered to the form on this email field right here. Let's now  do the same thing to the password input. So we'll come here, we'll do dot dot dot register.

And  this one will give password. With this, both of our inputs fields are registered to the form. So  this means that now whenever they change values, whenever we type in these input fields, that  value is going to get sent to React hook form, and it is going to manage everything for us  instead of us having to do it ourselves.

Next, we actually need to also connect this form element  here so that on submit, we actually call our own custom on submit function instead of submitting  it to the default behavior, which is to send it to an actual URL. So first, what we're going  to do is we're going to define our own custom on submit function. So we're going to do const on  submit.

And now if you are working in TypeScript, you're going to want to type this as submit  handler, which you can import to directly from React hook form, and then give it form fields.  If you're in JavaScript, just don't do this, it's totally fine, then it's going to be equals  data. And then we're just going to for now, console dot log data, and then close this out  right here, typing this function as submit handler, and then form fields is actually going  to make this data here be properly typed.

And as you can see, this has the type form fields, which  is basically this object right here. So the data that we're receiving from this function is not  actually the form event that we had previously in the first example. But it's actually just an  object with the email and the password and their corresponding values.

And the reason for that,  the reason why we're not getting the form event directly is because we're not actually going to  be passing this on submit function to the form, we're actually going to make use of the handle  submit function from React hook form and pass that instead and give this function as an argument  to this handle submit. So I'm going to come here to the form. And then I'm going to do on submit,  I'm going to I'm going to give it handle submit, and then on submit, like so what this is going to  do is that whenever this form gets submitted, it's going to first call the handle submit function,  which remember comes from React hook form.

And this will do some work behind the scenes for us,  for example, it'll prevent the default behavior of the form. And then it's also going to make sure  that our form fields here are valid before then calling this on submit function with the actual  form fields. So it doesn't give us the form event, it actually just does all of the work of  validating the inputs for us.

And then once they are valid, it calls this function with the  actual form fields, which is great, because that means that we don't have to do all of that work  ourselves. And now with this, we actually have a complete form using React hook form. So now let  me go back to the actual application.

And let's see our form right here. Let me just reload. So  we get a clean slate.

And now if I press submit, we actually get a lock here in our console with  the email and the password as empty strings, which is great. Our form now works exactly asAs we  expect, but we still have more work to do. Right now, we can actually submit this form without  putting anything in either of these input fields.

Let's add some validation to these input fields  and make sure that we have at least some basic validation before we submit our form. Now, there  are multiple ways that you can validate inputs in React Hook Form. I'm going to first start by  showing you the simplest one.

The simplest way to validate an input is actually to use this register  function right here. This function takes in an optional second parameter, which can be an object  for that specific field. And in this object, you can give it some properties to define how this  field gets validated.

For example, we can give it here, required, true. This is going to make it  so that this field is required to at least have some value in it before it is considered valid.  We can then come here and add the same thing to the password field, so we'll give this here an  object, we'll do required, true.

Now, if I go back to our application and I refresh, we can  no longer submit the form. I'm pressing submit, but nothing is being logged until I actually write  one letter and one letter in this field. Now, it's going to pass the validation and we actually  get our form submission.

Besides required, you can also do a regex pattern. So you  can do that by doing pattern like this, and you can do a pattern here. Let's let Copilot  write one for us and see how that does.

Let's come back here and let's put anything here, one letter,  one letter. It's not going to let me submit it, but as soon as I type a valid email, it should  theoretically, yes, let me submit it. You can do that with a pattern too.

For the password  field, we might want to add a minimum length, which we can do with minLength. We can give this  eight, for example, and now this is going to be required to at least have eight characters. So now  if I go back to the form and I type our email.

com, I'm going to do one, two, three, four, five, six,  seven, eight. And now I'm going to do, I actually think I type nine characters, but you get the  idea. If I put anything less than eight, it's not going to submit.

We now have a more robust  validation solution in React hook form. Also, if you want to do your own custom validation,  you can also do that. So let me remove here this pattern here and let's do validate.

You can  pass it a function that will receive a value, and then you can actually write some code with  that value. For example, we can make a check that the value includes at least an at symbol. So now  if I go back to the form, I can do this and I can type any sort of invalid email.

And as long as I  put an at symbol here and I put one, two, three, four, five, six, seven, eight in the password, it  will submit the form. If I remove the at symbol, it's no longer going to submit the form. There  are actually more things that you can put in here.

Things like max length, min and max. I'm  not going to go into them on this tutorial, but I would recommend that you go and look at  the documentation for React hook form to see all of the things that you can put in here. Form  is better, right?

We can actually submit. We have proper validation, but we're not actually showing  anything to the user. If the form is invalid, I'm pressing this button here and nothing is  really happening.

Ideally, like we had it before, I want to display an error if a specific input  field is invalid. And the way that we're going to do that in React hook form is we're actually going  to access the form state from this use form hook. So besides register and handle submit, you also  get access to form state.

And this one is going to be an object that you can destructure and you can  get access to the errors object in here. This will actually have, if I hover over this, it's going  to be field errors and then form fields. This will be an object with each of our form fields  and a corresponding error if there is.

And then we can actually use this to come back here to our  JSX and right below our email input. For example, we can come in here, open a curly bracket and do  errors. email and end, and we're going to do div and we're going to put here errors.

email. message.  We'll get back to message in just a moment.

Let me just add here some text so that this error  becomes red. So we'll do class name, text red 500. Let's save this and do the same thing for  the password.

So come here, do errors. password. And now we actually are going to show an error  if there's an error in that specific form.

So now if I go back to the form and I press submit,  we actually have something that happens. Let me just close this so you can see, but we're not  actually getting any errors. We do have more space between these fields here, but we're not actually  seeing our red errors.

What's going on? Well, if you actually look at our code, we do have this  div that is being rendered. So this errors.

email must be true because otherwise this div wouldn't  rendered the same for the password. But this message here is not rendered. If I actually hover  over this message, you're going to see that this is an optional property.

This can be either string  or undefined. The thing is, we have set our errors correctly in the sense that React hook form  is handling our errors with our validation, but we haven't actually defined any message for a  specific error. So this is actually undefined.

So to fix that, we actually have to implement error  messages when our validation is incorrect. And the way that you do that with React hook form  is actually super simple. Instead of returning a Boolean here with this specific validation,  you can actually return a string instead that will get used as the error message in case that  validation fails.

So let's do it. Let's remove true. And it's your return email is required. 

Let's now do the same thing for password, remove the Boolean and do password is required. So  now if I go back to the form and I press submit, we actually have the error messages that are  being properly displayed. This is what we want.

Cool. So let's go back to our code and let's  actually complete these for the validate function and also for the minimum length. So here in this  validate function, instead of returning a Boolean, we're going to take this code and we're going to  put it here as a function and we're going to do if value includes and let copilot complete everything  for us, we're going to return this string right here.

And also here we have to return true because  in the case where the input is valid, you still have to return a Boolean. It's only when it's not  valid that you can return a string and that string will get used as the error message. In the case of  our password where we have this min length here, we still have to return a number somehow, but  we can actually do it by passing an object here.

Instead, we can do value eight and then message  password must have at least eight characters. Now if I save all of this and go back to our form,  where's our form? There we go.

And I can reload. I can press submit. It's going to say email is  required.

As soon as I type one letter, this error now changes dynamically and automatically to  email must include at. If I then put at this input is going to be considered valid and now we no  longer have an error. The same for the password.

I can type one letter and now it's going to say  password must have at least eight characters. If I can type seven more, one, two, three, four,  five, six, seven, then we have no more errors and our input is valid. I can submit this and I  can open up the console and I can see our values right here.

Now we have proper validation in our  form. This is fantastic. Now let's take it one step further and let me show you something else  that react hook form makes really, really easy to do.

Let's say that now we want to convert this  on submit function into an asynchronous function. Instead of just console logging the data directly,  we actually want to await something, maybe sending it to a server and then only once the response is  returned, do we then want to continue. And also we would want to show that to the user.

We will  want to show to the user that the form is indeed being submitted. And on top of that, we should  also disable this button while the form is being submitted. So let's do that.

Let's first convert  this function into an asynchronous function. There we go. And now I'm going to do a wait and let's  see if copilot can do it.

Yes, it can. I'm just going to await something for one second, just so  that you can actually see what's going on. React hook form makes handling asynchronous functions  really, really simple.

There's actually another property that you can access in this form state  besides errors that is going to be is submitting. This property is a Boolean that will be true  when the form is submitting. And that's all that you have to do.

You don't have to manage your own  loading state. You don't have to handle anything. React hook form is doing all of that for you.

So  then we can actually just use this property right here. We can come back to our button and we can do  disabled is submitting. And actually, let's change this text here to actually make it show something  while the form is submitting.

So I'm just going to remove this. I'm going to do is submitting,  question mark, loading, otherwise submit. If I now save this and I go back to the form and I  refresh just so we have a clean slate, I'm going to type here an at symbol because that's where our  validation requires.

And then here, 1, 2, 3, 4, 5, 6, 7, 8, I press submit. It says loading. And then  one second after we actually get the lock in our console.

Once again, I press submit loading one  second after we get the lock in our console. And just like that, our form now supports asynchronous  functions. And all that we had to do was literally just convert this to an asynchronous function and  just await something inside of it.

And React hook form takes care of the rest. Now let me show you  another really cool feature about React hook form. Let's say that instead of just awaiting here an  empty promise, we were actually sending something to a backend.

The backend can sometimes fail.  It can sometimes throw an error if the form is invalid. If this was a sign in form, maybe the  user's credentials weren't valid.

And so the backend would actually return to us an error. And  we need to handle that error. We need to show that error to the user.

And ideally, we need to plug it  inside of our form. Well, to do that, React hook form makes this super easy for us. Once again, we  can actually access another function here called set error, and this willAnd the last thing we can  do is we can pass it here an object with a message that can be, this email is already taken.

And then  the last thing that we need to do is we need to throw an error in this try block here, so that  this catch gets executed. So I'll do, throw new error. And I'm just going to do it like so.

Now,  if I go back to the form and I refresh, so we have a clean slate, I'm going to first make sure that  this form is valid. So I'll put this, 1, 2, 3, 4, 5, 6, 7, 8. When I press submit, it's going to  load for one second, and then it's going to throw this error here on the actual input field.

This  email is already taken. We've now just gotten an error from the backend, an asynchronous error, and  we've plugged it inside of our form directly using setError. Now, what if we wanted this error to  actually not belong to any specific input field, but rather to belong to the form as a whole?

Well,  we can actually do that by simply replacing this email here with root. If you saw before, let me  show you again. We have three options here.

We have email, password, and root. We can use root  for an error that does not belong to any specific input field, but rather belongs to the form as  a whole. And then all that we will need to do is come back here to our actual JSX, and then just  render out this error.

So what I'm going to do, I'm just going to take this entire block, and I'm  going to put it here right below the button. I'm going to do errors instead of password. root.

And  that's it. With just this, if I now go back to the actual application, and I close this console so  you can see, I will press submit again. This error is going to get disappeared, and now this error  appears here at the bottom.

This is how you can easily have an error that comes from the backend,  an asynchronous error that doesn't necessarily belong to any single input, and you can display it  in your form. Now, there's one more thing that I want to show you about React Hook form that you're  probably going to want to be using. Let's say that instead of having here a fresh form, a form  with nothing in it, we actually want some default values in our form, because oftentimes we're not  creating an entity, but we're editing an entity, and we want the properties of that entity to be  pre-populated in our form.

And the way that you implement that in React Hook form is actually  really simple. All that you have to do is come here where you have use form, and in this  parenthesis here, just give it an object, and you can actually specify default values, and  then you can give it here any default values that you want. For example, we can do email, and we  can do test email.

com. And note, you don't have to provide every single field in here. You can  just provide the ones where you want to have a default value.

If I now go back to the form, and I  refresh, our email field automatically has test at email pre-populated. So you can use this to super  simply add default values to your form. And now as a bonus, let me actually show you the recommended  way to use React Hook form.

There's actually a better way to handle our validation here that  is actually a lot less code, and that is going to involve using Zod as our validation library.  And for this, you're actually going to need to install two more things besides React Hook form,  because they come separate. The first one is the hook form slash resolvers library, which will give  you access to some resolvers that you can plug into your form.

And the second one is going to be  the Zod library. This is a very popular validation library. It does a lot more than just validation,  but it works really nicely with React Hook form through this resolvers library.

Then once you have  those installed, you can come back here to the form, and you can start by writing import Z from  Zod. And then we're going to use the Z to actually define a schema for our form. And I'm going to  let Copilot be very helpful and define it for us.

So we have here const schema equals Z. object. And  then this object is going to have two properties, email, which is going to be Z.

string. email.  This is very important.

And then password, Z. string. min8.

This video isn't going to be a  tutorial on Zod. I do plan on making one. I just haven't already.

So if you're watching this at a  later point, it might already be out. But for this purposes, this is all that we're going to do with  Zod. Then the next thing that we want to do is we can actually get rid of this form field because we  can infer it from the schema directly.

So what I can do is I can just do here type form fields  equals Z. infer type of schema. And actually, let's just get rid of this so we don't have  duplicates.

Basically, we have the same type here, email, string, password, string. But this is  being inferred directly from the schema here. This is also one of the benefits that you get from  using Zod.

And then in our form, we can come back here to where we have used use form. And besides  default values, we can do here resolver. And we can pass it here, Zod resolver.

We will import  this from at hook form slash resolvers, the library that we just installed. And we're going  to pass it here, the schema. What this is going to do is this is going to connect our schema to  React hook form using the Zod resolver.

And this schema from Zod actually has a lot of validation  already built in. If you just look at email here, email is going to first make sure that it's a  string, which it should be. We have an input of type text.

But then it's going to make sure  that this string is a valid email. This dot email here is going to perform all of the validation  necessary to make sure that this is a valid email, which if you remember, is a lot more than what we  did for our form. Our only validation was inside of this function here.

And we only checked that  the value has an at symbol. This dot email will actually do a lot more checks and will only  return true if this email is valid. So this is great because we did all of our work and  more with just one simple line of code.

And then for the password, we're still checking  that it's a string. And then all that we have is dot min eight. We're basically checking  that this is at least eight characters, which is exactly what we had defined here previously.

So  now because of this, we can actually remove all of our own custom validation. So we can come here  and we can remove all of this directly. And we can just use the register like this, like so.

We can  do the same thing with the password. Come here, remove everything. And now our code looks a lot  simpler because all of the validation is defined in Zod.

And we don't have to do it ourselves. If  I now open up our form again and I press submit, we actually get the same error, although it has a  different error message because now this is coming from Zod. But it's saying that string must contain  at least eight characters.

If I then put something in here, it's not going to get removed until we  have eight characters. If I remove the email here, it's going to say invalid email. I can type a  letter.

It's still invalid email. I can put an at symbol. It's still invalid email.

But as soon as  I do email. com, then the error goes away. And this is now a valid email.

This is the recommended way  to use React hook form and actually to build forms in React. Using React hook form, you get a lot  of this functionality pre-built already. You get all of the state management, error handling, and  more.

And using Zod as your validation library, you then outsource the validation to Zod so  that you don't have to do it yourself. And also, one of the little benefits of using Zod is  you no longer have to even define your own types. If you're using TypeScript, they can get  automatically inferred from Zod.

So if you ever find yourself building a form in React, consider  using React hook form and consider using Zod as your validation library. If you enjoyed this  video and you want to see more tutorials just like these, make sure to leave this video a big  thumbs up. You can also click here to subscribe.

Or you can click here to watch a different video  of mine that YouTube seems to think that you're really going to enjoy. With that being said,  my name has been Darius Cosden. This is Cosden Solutions.

Thank you so much for watching. And  I will see you in another video. Ciao, ciao.