React Hook Form: the best form library?

Intro

This is a very short post on a library I recently discovered (to build the beta subscription of React Bricks CMS) and which I love: React Hook Form.

I come from Redux Form (which still haunts my old projects), then embraced the great Formik by Jared Palmer.

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

And... I love Hooks: you completely avoid the wrappers hell problem you typically have with Render Props (in this talk at ReactJsDay I explain why Hooks are superior to Higher Order Components and Render Props).

Here's a simple example, complete with validation:

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 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 and let me know your opinion!