How To Make Easy Forms with React Hook Form

Usually forms are controlled in React. Using a controlled form gives you a high level of abstraction, easier testing, a single source of truth and more benefits over standard uncontrolled forms.

Using a standard React controlled form however, has two major downfalls — lots of code and a re-render on every key press. React Hook Form solves both of these problems. It is also arguably easier to learn than using controlled forms, if you are new to React.

React Hook Form Benefits

When creating a basic controlled form in React, you have to do the following:

• use a class component (takes more code than a functional component)
• define a state
• create and pass event handlers for input change
• create and pass a submit handler

This tends to create a lot of code. With React Hook Form, you need to:

• use a functional component
• pass register to ref
• create and pass a submit handler

To create this simple form:

took me 54 lines of code as a React controlled form:

and only 31 lines of code with React Hook Form:

Some things to note here are:

• I dont need need to constantly update a state and use that to update an inputs value
• I dont need to make the input change handlers here, where I had to make two in the controlled form, one for the checkbox and one for both text inputs
• I dont need to prevent the submits default behavior (may take some special consideration for async validation, though)

If I typed in a 10 character long email and password, clicked the checkbox, and submitted, I would have rendered the form more than 20 times in a React controlled form, but in React Hook Form, I would have only rendered the form once and then once again on submit. These 20 renders are completely negligible in a small development application with a basic form, but in a large production application, it may be necessary to go for the optimal speed.

Steps to create a React Form Hook

The following will show you how to make a very simple, single validated text input form in React Hook Form.

First, npm install react-hook-form or yarn add react-hook-form to get started and then import { useForm } into your project.

Next get your register , handleSubmit , and errors hooks.

Next, define your onSubmit function.

Now, create a form and give it your onSubmit function.

The register hook is how we keep track of our form data. Pass your register hook to the input so that we will have it when submitting.

We now have a basic form:

register tracks our inputs. We can also send it key value pairs to validate the input. Lets make the field require at least 3 characters of input. I am also adding a console log to on submit

Here we can see that nothing gets submitted until the field has 3 or more characters.

Not allowing a submit unless it meets a criteria is not very intuitive to our user though, so lets add an error message if any exist.

note: *expression1* && *expression2* is just shorthand for if/then

Our app now tells the user that their input needs to be longer if it does not pass validation, and the form will still not submit.

There are a few form APIs for React, such as Formik, Redux Form (not really used anymore) and React Final Form (same creator as Redux Form), each having some major benefits over Reacts standard controlled form. I prefer React Hook Form for its ease of use, low complexity, and short code.