- React ecosystem
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)}><inputname="fullName"ref={register({ required: true })}/>{errors.fullName && <span>Enter your name</span>}<inputname="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!