React Hook Form: the best form library?

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!

Comments

[Anurag Hazra]

I love react-hooks-form

[starpebble]

React hooks is going to rewrite the entire farm and I really like react-hooks-form too. react-hooks-form's validation logic is very powerful which means I can stop junk data entry easily by writing form input validation javascript and display messages to the user when there is a validation error.

[Bill]

Thank you Starpebbel. I am super glad to hear that. I think as a dev i love thing to be simple and elegant. Get the job done and we can all finish on time at work. 🎊🎊🎊

[starpebble]

Very interesting point - simple and elegant. That's exactly how a good function is described. Other descriptions: 'Does one thing.' 'Small.' React hooks is changing some of our website code because works with a javascript function when lots of react code is structured around the React Component as a class with events and methods. Another example - useEffects() accepts an anonymous function that we all might as well call a 'lambda' function. React Hook forms is cheering us on to simplify, IMHO.

[Bill]

Thank you Anurag!

[Emin Qasimov]

it is not the best for me.
I like this one, github.com/react-component/field-form
it is better to use with ant.design/components/form/
so simple and don't rerender all form items

[Matteo Frana]

This library uses the "Render props" pattern which I don't like. I think hooks are a much cleaner pattern.
The documentation of React Hook Form is much better, too. This library leverages Storybook to let you learn by examples, but I prefer a more organized documentation.

Anyway, I never used ant.design, but I'm quite sure you could easily wrap their components using React Hook Form's Controller component

[Emin Qasimov]

no, it was not easy to me to handle antd ui inputs with react hook form, (it cause so much rerenders) Hook form needs to pass ref of inputs to control them,(i cant pass ref to ant input) but field-form uses new hooks and context, i have not used render props with it, field-form is part of antd design community. yes its doc is not clear, but every case exampls is presented on antd docs. i loved its api.

[Bill]

Hey Emin,

React Hook Form author here, It's great to hear feedback from the community. I am glad you enjoyed using field-form, and we should all appreciated the hard work that the author have putting in. In case, you may take a look again with RHF, let me know if you have any problems with it, we can work it out. In terms of integrate with external components, we are doing it pretty nicely IMO:

Controller:
react-hook-form.com/api#Controller

Codesandbox: examples with MUI, react-select and etc.
codesandbox.io/s/react-hook-form-c...

[David Itam Essien]

Can we get examples for ant design, because nothing I have tried works.

[Bill]

Have a look at this section: react-hook-form.com/api#Controller and this codesandbox which in the doc as well: codesandbox.io/s/react-hook-form-v...

[David Itam Essien]

I have looked at it over and over again. Even copied the code from the sample into my own form as it is. That does not work. I cannot get values or the errors from the input. By the way, I am using React 17, could that be the issue?

[Bill]

no, i don't think. send a question at Github discussion and bring a coedesandbox as well.

[Bill]

Thank you very Matteo for putting this article today. I really appreciate the love, effort and kindness that you gave to the library. The library is still young and we are keeping improving it all the time as well. <3

Many thanks
Bill

[Noitidart]

How does this compare with react-final-form which has hooks? I thought final-form had the best performance.

[Matteo Frana]

react-final-form uses a "Render props" pattern: you have to import and use its components:
import { Form, Field } from 'react-final-form'

I don't like this approach because it creates a wrapper hell (nesting of non-rendering components). See the first example: you have RFF's Form wrapping the real form. Also the Field component makes it more difficult to integrate it with other libraries: you have the Field from the form library, the Field from the UI library (for example material-ui) and you need to create another custom Field to wrap the two together.

I see that it has also a useForm hook, but that it needs to be used inside the Form component.

I find React Hook Form to be much more clean.

[Bill]

Final-form is great. You are safe with it <3

[David Itam Essien]

@matfrana - Thank you for this. I am working with ant design and I find that form validation does not display the error messages. The recommended way in the react-hook-form is to use Controllers however, I have not been able to get that to work too.

Can you please provide a concrete example for an input field if that is clear to you.

[Hasan Habib]

Someone please share how to post multipart/form-data using React-Form-Hook. by default it generate Content-Type: application/JSON.