npmBeginner-friendly

react-hook-form

Performant, flexible and extensible forms library for React Hooks

reactformsvalidationperformanceuncontrolledhooksformform-validationtypescriptreact-hooks

The Problem

Controlled forms in React — where every input is tied to state with onChange — cause a re-render on every keystroke. A form with 10 fields re-renders 10 times per character typed. For complex forms with validation, this tanks performance. React Hook Form uses uncontrolled inputs and the ref model to avoid re-renders.

Mental Model

Instead of storing form values in React state, React Hook Form stores them in a ref (outside React's render cycle). You register each input with a register() function, which attaches the ref. Validation runs on submit or blur, not on every keystroke. Re-renders only happen when validation errors change or the form is submitted.

60-second start

Install react-hook-form

npm install react-hook-form
import { } from 'react-hook-form';

Use it when

Use React Hook Form for any form with more than 3-4 fields, especially if they have validation logic. It integrates well with Zod (via @hookform/resolvers/zod) for schema-based validation, giving you type-safe forms with runtime validation in a few lines.

Skip it when

For very simple single-field forms (a search box, a newsletter signup), useState is less code. For highly dynamic forms where fields are added/removed programmatically, the useFieldArray API works but adds complexity — evaluate Formik for that use case.

Alternatives

formikOlder, more opinionated form library; controlled by default but has a larger ecosystem of examples

tanstack-formFramework-agnostic form library from the React Query author — newer but with strong TypeScript support

Ready to explore the full API?

See every class, function, and relationship in an interactive graph.