React Hook Form is a form library that manages form state and validation with minimal re-renders, using uncontrolled inputs registered via a ref-based API rather than controlled state for every field.

Syntax

npm install react-hook-form

const { register, handleSubmit } = useForm();
<input {...register('fieldName')} />

Deep Dive Course

Unlike Formik's typically controlled-input approach, React Hook Form registers each input using refs internally via the spread {...register('fieldName')}, meaning individual keystrokes don't trigger a re-render of the whole form the way updating controlled state on every change does, which can meaningfully improve performance for very large forms. The handleSubmit function wraps your own submit handler, running validation first and only calling your handler with the current form values if validation passes, and validation rules can be specified inline via register's options or through a schema-validation library like Yup or Zod via a resolver.

1Understanding React Hook Form

💡

React Hook Form's ref-based registration means most individual keystrokes don't trigger a React re-render of the whole form at all, unlike a fully controlled Formik-style form, which is exactly why it tends to perform noticeably better on very large forms with many fields.

editor.html

import { useForm } from 'react-hook-form';

function LoginForm() {
  const { register, handleSubmit } = useForm();
  const onSubmit = (data) => console.log('Submitted:', data);
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('email', { required: true })} />
      <button type="submit">Log In</button>
    </form>
  );
}

localhost:3000

2Practical Example

Here is a real-world application of React Hook Form showing how it is used in production React code.

editor.html

import { useForm } from 'react-hook-form';

function LoginForm() {
  const { register, handleSubmit, formState: { errors } } = useForm();
  return (
    <form onSubmit={handleSubmit((data) => console.log(data))}>
      <input {...register('email', { required: 'Email is required' })} />
      {errors.email && <span>{errors.email.message}</span>}
    </form>
  );
}

localhost:3000

3Best Practices

Follow these guidelines when working with React Hook Form:

1. Register inputs via {...register('fieldName', validationRules)} rather than manually wiring controlled state and onChange handlers for each field

2. Wrap your actual submit logic in handleSubmit(), letting it run validation first and only invoke your function once the form is genuinely valid

3. Use a schema-validation library like Zod or Yup via a resolver for complex validation, rather than scattering many individual inline validation rules across each register() call

⚠️

Tip: React Hook Form's ref-based registration means most individual keystrokes don't trigger a React re-render of the whole form at all, unlike a fully controlled Formik-style form, which is exactly why it tends to perform noticeably better on very large forms with many fields.

editor.html

import { useForm } from 'react-hook-form';

function LoginForm() {
  const { register, handleSubmit } = useForm();
  const onSubmit = (data) => console.log('Submitted:', data);
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('email', { required: true })} />
      <button type="submit">Log In</button>
    </form>
  );
}

localhost:3000

Examples

Example 01Basic Usage

import { useForm } from 'react-hook-form';

function LoginForm() {
  const { register, handleSubmit } = useForm();
  const onSubmit = (data) => console.log('Submitted:', data);
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('email', { required: true })} />
      <button type="submit">Log In</button>
    </form>
  );
}

Example 02Advanced Example

import { useForm } from 'react-hook-form';

function LoginForm() {
  const { register, handleSubmit, formState: { errors } } = useForm();
  return (
    <form onSubmit={handleSubmit((data) => console.log(data))}>
      <input {...register('email', { required: 'Email is required' })} />
      {errors.email && <span>{errors.email.message}</span>}
    </form>
  );
}

Best Practices

Register inputs via {...register('fieldName', validationRules)} rather than manually wiring controlled state and onChange handlers for each field
Wrap your actual submit logic in handleSubmit(), letting it run validation first and only invoke your function once the form is genuinely valid
Use a schema-validation library like Zod or Yup via a resolver for complex validation, rather than scattering many individual inline validation rules across each register() call

Interview Question

Why does React Hook Form's use of uncontrolled, ref-based inputs generally result in fewer re-renders than a fully controlled form built with individual useState calls per field?▼

Hint: Think about what actually triggers a React re-render, and whether reading a ref-based input's current value requires that same trigger.

A fully controlled input updates a piece of React state on every single keystroke via its onChange handler, and every state update triggers a re-render of the component holding that state, meaning a controlled form with several fields can trigger a re-render on literally every keystroke across every field, even though most of a typical form's other fields haven't changed at all. React Hook Form instead reads each registered input's current value directly from the actual DOM node via a ref, whenever it's actually needed, like at validation or submission time, rather than needing that value continuously mirrored into React state on every change — since nothing in React state is being updated on each keystroke, there's no re-render being triggered by typing into these ref-based fields at all. This is exactly why very large forms, with dozens of fields, tend to feel noticeably snappier under React Hook Form's approach, since typing into any single field doesn't cascade into a re-render of the whole form component on every character.

Exercises

MediumPractice using React Hook Form in a real scenario.

View Solution

import { useForm } from 'react-hook-form';

function LoginForm() {
  const { register, handleSubmit } = useForm();
  const onSubmit = (data) => console.log('Submitted:', data);
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('email', { required: true })} />
      <button type="submit">Log In</button>
    </form>
  );
}

Frequently Asked Questions

Why does React Hook Form's use of uncontrolled, ref-based inputs generally result in fewer re-renders than a fully controlled form built with individual useState calls per field?▼

Related Functions

formikform-validationcontrolled-vs-uncontrolled