Build the Next Generation of Forms With React Hooks Forms

Performant, flexible, and extensible forms, easy to use with validation by React Hooks

Riccardo Giorato
Oct 16, 2019 · 2 min read
Image for post
Image for post

Why Not Other React Library Forms?

It’s really simple, there are multiple good reasons:

  1. Performance is important and package size matters. This is a tiny library without any dependencies.
  2. Reduces the code to handle forms, with less complexity due to the Hooks. You can find a complete code comparison here.
  3. Minimizes the number of re-renders and faster mount, striving to provide the best user experience. Twenty times less than other packages like Formik or Redux Form.
  4. Easy to adopt as form state is inherently local, it can be easily adopted without other dependencies.


Installing React Hook Form only takes a single command and you’re ready to roll. If you are using npm:

npm install react-hook-form

Or, if you are using Yarn:

yarn add react-hook-form

Basic Usage

The following code will demonstrate basic usage.

The main component used is the useForm Hook with the returned functions and variables:

  • register: To connect a field to rules or validation functions.
  • handleSubmit: To check and validate all fields before sending submit.
  • watch: This will watch specified inputs and return their value.
  • errors: Contains form errors or error messages that belong to each input.

Register Fields

Each field needs a specific unique name that you will also use for labels and then you will pass the register Hook to the ref element.

Inside it, you will pass multiple parameters. Required is needed to tell if the user has to enter that field and then you will be able to easily use other standard HTML rules.

Here’s the list of validation rules supported:

  • required
  • min
  • max
  • minLength
  • maxLength
  • pattern
  • validate

The validate function is a great way to use custom logic specific to that field, enabling you to implement custom behavior very easily.

validate: (value) => value === '1'

Handle Fields Errors

React Hook Form provides an errors object to show you the errors within the form related to each unique field.

Drag and Drop Builder

You can build your own form with auto-generated code here at the React Hook Form Website.

You will be able to re-arrange using drag and drop, delete, and edit each field to start using this incredible plugin, without having to read any documentation, simply by copying that code.

You can easily build a form like this one in less than one minute!

If you want to learn more about Hooks

I have personally read Learn React Hooks when I started using hooks and it helped me understand them to use tools such as useForm:

References and Resources

Better Programming

Advice for programmers.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store