The last react form library you will ever need
Tags: react, javascript, webdev, form
Published: 2022-07-11 20:24:39

It’s been a while so I thought I would share a quick guide for my favorite form library, the mighty [`react-hook-form`](https://react-hook-form.com/).

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.

```jsx
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!

{% embed https://codesandbox.io/embed/state-form-z0ok5k?fontsize=14&hidenavigation=1&theme=dark&view=editor %}

*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.

![entering ring](https://media.giphy.com/media/KWB8ERNFqC1Z4n3eC4/giphy-downsized-large.gif)

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.

{% embed https://codesandbox.io/embed/react-hook-form-sstsg7?fontsize=14&hidenavigation=1&theme=dark&view=editor %}

*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

{% embed https://codesandbox.io/embed/react-hook-form-validation-6rt036?fontsize=14&hidenavigation=1&theme=dark&view=editor %}

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.