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!