Skip to content

React Hook Form

Performant, flexible and extensible forms with easy-to-use validation.

React Web

React Native

V7 is Live!

Thanks to the team members:

🏅Achievements

  • ★ Strictly typed form

  • ★ Smaller Package Size (-13%)

  • ★ More performant than ever

  • ★ New Resolver & DevTools

  • ★ API Refinements

  • ★ New custom hook useFormState

Check out API
People

DX

Intuitive, feature-complete API providing a seamless experience to developers when building forms.

HTML standard

HTML standard

Leverage existing HTML markup and validate your forms with our constraint-based validation API.

Super Light

Super Light

Package size matters. React Hook Form is a tiny library without any dependencies.

Performance

Performance

Minimizes the number of re-renders and faster mounting, striving to provide the best user experience.

Adoptable

Adoptable

Since form state is inherently local, it can be easily adopted without other dependencies.

Award

Award

Winner of 2020 GitNation React OS Award for Productivity Booster.

Less code. More performant

Reducing the amount of code you need to write, and removing unnecessary re-renders are some of the primary goals of React Hook Form. Now dive in and explore with the following example:

React Hook Form

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
        type="email"
        {...register("email", {
          required: "Required",
          pattern: {
            value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
            message: "invalid email address"
          }
        })}
      />
      {errors.email && errors.email.message}

      <input
        {...register("username", {
          validate: value => value !== "admin" || "Nice try!"
        })}
      />
      {errors.username && errors.username.message}

      <button type="submit">Submit</button>
    </form>
  );
};
Barcode

Isolate Re-renders

You have the ability to isolate components re-renders which leads to better performance on your page or app. The following example demonstrates this.

React Hook Form

Child Component A
Child Component B
Child Component C

VS

Controlled Form

Child Component A
Child Component B
Child Component C

The Community

Build and drive by the community. On a mission to make every React developer's life easier when it comes to building forms.

Subscriptions

Performance is an important aspect of user experience in terms of building forms. You will have the ability to subscribe to individual input and form State update without re-rendering the entire form.

Barbell

Reduce Rendering

Do you ever wonder how many component re-renders have been triggered by the user? React Hook Form embraces uncontrolled form validation to reduce any unnecessary performance penalty.

Total re-renders: 3

Total re-renders: 30+

Faster Mounting

The following screenshots demonstrate how much faster component mounting is with React Hook Form compare with others.

React Hook Form

  • No. of mount(s): 1
  • No. of committing change(s): 1
  • Total time: 1800ms
React Hook Form performance

Others

  • No. of mount(s): 6
  • No. of committing change(s): 1
  • Total time: 2070ms
Formik performance
  • No. of mount(s): 17
  • No. of committing change(s): 2
  • Total time: 2380ms
Redux Form performance

Live Demo

The following form demonstrates form validation in action. Each column represents what has been captured in the custom hook. You can also change fields in the form by clicking the EDIT button.

Example

or

Watch

ⓘ Change inputs value to update watched values

{}

Errors

ⓘ Validation errors will appear here

Touched
ⓘ Touched fields will display here
[]
Ready to get started?
Form handling doesn't have to be painful. React Hook Form will help you write less code while achieving better performance.
Edit