React Hook Form: the best form library?
Tags: react, javascript, webdev
Published: 2020-04-02 12:45:00

This is a very short post on a library I recently discovered (to build the beta subscription of [React Bricks CMS](https://www.reactbricks.com)) and which I love: [React Hook Form](https://react-hook-form.com/).

I come from [Redux Form](https://redux-form.com/) (which still haunts my old projects), then embraced the great [Formik](https://jaredpalmer.com/formik) by [Jared Palmer](https://twitter.com/jaredpalmer).

Today I use React Hook Form everywhere, replacing Formik.

Why?

# 1. Less and cleaner code

This is the main reason why I love React Hook Form: it has the smallest amount of code of any other library: **you just execute a hook and add a `ref` to your fields**. Done.

**Validation is added in one second** too, using the provided `required`, `min`, `max`, `minLength`, `maxLength`, `pattern`, `validate` rules. 

Out of the box it focuses on the first field with a validation error.
If you prefer, you may use a centralized [yup](https://github.com/jquense/yup) schema.

**And... I love Hooks**: you completely avoid the wrappers hell problem you typically have with Render Props ([in this talk at ReactJsDay](https://www.youtube.com/watch?v=BEYg11nZev4) I explain why Hooks are superior to Higher Order Components and Render Props).

Here's a simple example, complete with validation:

```jsx
import React from 'react'
import { useForm } from 'react-hook-form'

const Example = () => {
  const { handleSubmit, register, errors } = useForm()

  const onSubmit = values => {
    console.log(values)
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      
      <input
        name="fullName"
        ref={register({ required: true })}
      />
      {errors.fullName && <span>Enter your name</span>}

      <input
        name="email"
        ref={register({
          required: 'E-mail required',
          pattern: {
            value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i,
            message: "Enter a valid email address"
          }
        })}
      />
      {errors.email && errors.email.message}

      <button type="submit">Submit</button>
    </form>
  )
}
```

Very easy, huh?

# 2. Documentation

**The documentation is a pleasure to read.**
It is very well done and also beautiful: to me this is very important.

# 3. Easy integration with UI libraries

I integrated it very easily with **react-select** and I wrapped my **custom form components** in a snap. 

No friction here means **you can start using it with no worries** about how well it would play with your existing components' stack: **it plays well**.

# 4. Super light and zero dependencies

Absolutely no dependencies, which is very good from a tech debt perspective and... just 5 KB!

# 5. Performance

I am not one of those evaluating a library based on a couple of milliseconds of difference, but, also from this point of view, React Hook Form beats them all: it **reduces the number of re-renders** to the bare minimum and it mounts faster than Formik or Redux Form.

# 6. Batteries included

### Form Builder
React Hook Form comes with a [Form Builder](https://react-hook-form.com/form-builder) which comes in handy, especially for a quick form with simple validation rules.

### Dev Tools
It has its own Dev Tools to debug the form status. 
I admit that I still haven't used it, but I think it's a nice-to-have plus.

# Conclusion
Really, I couldn't ask for more. 
So... yes, in my opinion **this is the best React form library today**.

[Try it yourself](https://react-hook-form.com/) and let me know your opinion!