React Hook Form

React Hook Form is a form-state management library for React that uses uncontrolled inputs and refs instead of re-render-heavy controlled components, keeping form interactions fast even with large or deeply nested forms. It exposes a single useForm hook that returns registration helpers, submit handlers, and granular form-state subscriptions, so components only re-render when the specific field or state slice they subscribe to actually changes.

The library ships zero runtime dependencies, embraces native HTML constraint validation out of the box, and layers on optional schema-based validation through a resolvers package that adapts Zod, Yup, Joi, Superstruct, AJV, and others. Its API surface — register, handleSubmit, watch, useController, useFieldArray, useFormContext — has stayed stable across major versions, which combined with first-class TypeScript inference has made it the default forms library for a large share of the React ecosystem, including React Native projects.

What You Get

• The useForm hook, providing register, handleSubmit, watch, reset, setValue, getValues, and a subscription-based formState object
• useController and the Controller component for wrapping controlled/third-party UI inputs (MUI, Chakra, Ant Design, etc.) that can’t accept a ref directly
• useFieldArray for dynamic, appendable/removable lists of form fields (line items, repeated groups)
• useFormContext for prop-drilling-free access to a shared form instance across deeply nested field components
• Built-in native HTML validation (required, min, max, pattern) plus an official @hookform/resolvers package bridging Zod, Yup, Joi, Superstruct, AJV, and class-validator schemas
• Full TypeScript generics that infer field names, types, and error shapes directly from your form’s type or validation schema
• A DevTools browser extension and companion form-builder for inspecting and scaffolding forms

Common Use Cases

• Multi-field application forms (signup, checkout, settings) where re-render performance matters as field count grows
• Forms that need schema-driven validation shared between client and server via a single Zod or Yup schema
• Dynamic, user-extensible forms with add/remove field groups via useFieldArray (line items, contact lists, survey questions)
• Wrapping third-party controlled UI component libraries (MUI, Chakra UI, Ant Design) inside a form via Controller
• React Native forms, since the library has no DOM dependency and works identically off native inputs

Under The Hood

Architecture The library centers on a single factory, createFormControl (src/logic/createFormControl.ts, ~2000 lines), which builds a stateful control object shared by every hook and component in a form tree. useForm (src/useForm.ts) instantiates this control once per form and memoizes it across renders; register attaches refs directly to DOM inputs rather than routing their values through React state, so raw input changes bypass React’s render cycle entirely. Form state (errors, dirtyFields, touchedFields, etc.) is exposed through a subject/observer pattern (createSubject in src/utils) so that useFormState, useWatch, and Controller can each subscribe to only the slices they read, and React only re-renders the specific consumers whose subscribed state actually changed on a given update. useFieldArray and useController layer on top of this same control object to handle dynamic arrays and controlled-component bridging without duplicating the core state machine.

Tech Stack Written entirely in TypeScript (99% of the codebase) with zero runtime dependencies — peerDependencies lists only react (^16.8.0 || ^17 || ^18 || ^19), and validation-schema support is delegated to a separate @hookform/resolvers package rather than bundled in. The build pipeline uses Rollup (scripts/rollup) to produce CJS, ESM, and UMD bundles plus a dedicated React Server Components entry point (index.react-server.ts), and Microsoft’s API Extractor to generate and lint the public .d.ts surface, which is how the project keeps its TypeScript generics stable across releases.

Code Quality Tests are extensive and colocated: src/__tests__ mirrors the hook/logic structure with 115 test files matching 115 non-test source files, run via Jest with @swc/jest for fast TypeScript transpilation and @testing-library/react for hook/component behavior assertions; a separate src/__typetest__ suite type-checks the public generics with tsc. ESLint (flat config, eslint.config.mjs) plus simple-import-sort and Prettier are enforced via Husky + lint-staged pre-commit hooks, and a bundlewatch budget (14.0 kB max for the CJS bundle) gates bundle-size regressions in CI.

API Design The public API is small and consistently named — register, handleSubmit, watch, reset, setValue, getValues — and a minimal quickstart (useForm() + register() + handleSubmit()) is enough to get a validated form working, with Controller as the documented escape hatch for controlled third-party inputs. Generic type inference (form values flow from a single type parameter or a Zod/Yup schema into every hook’s return type) means field-name typos and mismatched validation rules surface as compile errors rather than runtime bugs, which is unusually strong ergonomics for a UI-state library.