React Hook Form — Performant Forms with Easy Validation

What it is

React Hook Form is a form library for React that uses uncontrolled inputs and refs instead of controlled state. This architectural choice means the parent component does not re-render on every keystroke, making it significantly faster than alternatives that rely on controlled inputs.

React Hook Form targets frontend developers building forms in React applications who need validation, error handling, and dynamic fields without performance overhead. At approximately 9KB gzipped with zero dependencies, it adds minimal bundle weight.

How it saves time or tokens

Traditional React form libraries re-render the entire form on every input change. React Hook Form avoids this by storing values in refs and only re-rendering when validation errors change or the form submits. For forms with many fields, this eliminates hundreds of unnecessary renders per session.

The register function returns props that wire up inputs in a single line, reducing boilerplate code compared to managing onChange handlers and state variables manually.

How to use

1. Install the library:

npm i react-hook-form

1. Create a form with validation:

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

type Inputs = { email: string; password: string };

function LoginForm() {
  const { register, handleSubmit, formState: { errors } } = useForm<Inputs>();

  const onSubmit: SubmitHandler<Inputs> = (data) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('email', { required: 'Email required' })} />
      {errors.email && <span>{errors.email.message}</span>}
      <input type='password' {...register('password', { minLength: 8 })} />
      <button type='submit'>Login</button>
    </form>
  );
}

1. Add a schema resolver for Zod or Yup validation if needed:

npm i @hookform/resolvers zod

Example

Dynamic field array with validation:

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

function TaskForm() {
  const { register, control, handleSubmit } = useForm({
    defaultValues: { tasks: [{ name: '' }] }
  });
  const { fields, append, remove } = useFieldArray({ control, name: 'tasks' });

  return (
    <form onSubmit={handleSubmit(console.log)}>
      {fields.map((field, index) => (
        <div key={field.id}>
          <input {...register(`tasks.${index}.name`, { required: true })} />
          <button type='button' onClick={() => remove(index)}>Remove</button>
        </div>
      ))}
      <button type='button' onClick={() => append({ name: '' })}>Add Task</button>
      <button type='submit'>Submit</button>
    </form>
  );
}

Related on TokRepo

• AI Tools for Coding -- Developer libraries and coding productivity tools
• Featured Workflows -- Discover popular tools and configurations

Common pitfalls

• Mixing controlled and uncontrolled patterns causes unexpected behavior. Do not combine register with React state-managed value props on the same input.
• The watch function triggers re-renders for watched fields. Use it sparingly and prefer getValues for one-time reads that do not need reactivity.
• Field arrays require the key prop to use field.id from React Hook Form, not the array index. Using index as key causes stale data after add/remove operations.