The last react form library you will ever need

It’s been a while so I thought I would share a quick guide for my favorite form library, the mighty react-hook-form.

Instead of just showing you how to use the library, let’s do a little experiment that will showcase its main advantage.

A matter of performance

We have this simple form, two inputs and a submit button.

import { useState } from "react";

import "./styles.css";

export default function App() {

  return (
    <div className="App">
      <h1>Form</h1>
      <form>
        <label htmlFor="name">name</label>
        <input
          id="name"
          type="text"
        />
        <label htmlFor="age">age</label>
        <input
          id="age"
          type="number"
        />
        <button type="submit">submit</button>
      </form>
    </div>
  );
}

The state approach

First, we’ll take the popular approach when making controlled forms in react, using state.

Let's create two states, one for the name and another one for the age and use them to control the value of the inputs.

We will also add an onSubmit function that will set and then display the result values.

For our little experiment we want to know the amount of re-renders that are happening under the hood. Outside the component let’s add a variable that will store the number of rerenders.

Final result!

Open the sandbox to see the code in action

Ok, that's a lot of rerenders :(

We won’t notice any performance issues in this small form, but the reality is that the current approach is not very scalable, if we keep adding inputs we will notice some important performance issues.

The react-hook-form approach

Time for react-hook-form to enter the ring.

Let’s try to replicate the same form with this library.

The useForm hook is all we need, spreading the register function and taking care of the submit with the handleSubmit function.

This all makes sense when you see it, here it is.

Open the sandbox to see the code in action

Only one lonely render, the initial one.

You can probably already tell the advantages of react-hook-form and how it will help scale your forms much better.

How?

So how does it track the values without needing to re render.

In two concepts, ref and uncontrolled inputs.

In our first form we rely on state to keep track of the values in our form, so every time the we need to update the values, state needs to be updated as well, causing a re render. react-hook-form uses ref instead, which lets us store the values and update them without causing a re render. We don’t need to control the value of the input with this approach, so that’s why we say the inputs are uncontrolled.

Wrapping up

Performance is the main feature of react-hook-form, but there is a lot more that you can see and explore by yourself, like validation and error handling.

For example

I know some of you are about to write a comment saying this validation can be done natively with the input props. That is true, but the moment you need any customization to display the error then you will need to implement something else. Also, you can implement a lot more validations and other features with this library.

Hope this was helpful and, if you haven’t yet, try this wonderful library and even support them if you are able to.

Please like and share if you found this useful, until next time.