react-hook-form

Performant, flexible form management for React — minimal re-renders, easy validation, and zero dependencies.

react-hook-form

React

Performant, flexible form management for React — minimal re-renders, easy validation, and zero dependencies.

npm GitHub Docs

Fit

Bundle (gzip)

13.8 kB

39.6 kB raw

Install size includes transitive dependencies. Bundle size is gzipped browser payload.

Freshness

The Problem

Managing form state in React typically causes the entire form to re-render on every keystroke. Adding validation means wiring up state, effects, and error messages by hand — leading to verbose, error-prone code.

What It Does

React Hook Form uses uncontrolled inputs with a register API to track values without triggering re-renders. Validation integrates with any schema library (Zod, Yup, Valibot) via a resolver pattern, and formState exposes errors, dirty fields, and submission status automatically.

Installation

bash

npm install react-hook-form

Usage Example

tsx

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

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

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

  const onSubmit = (data: FormData) => console.log(data);

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

Related packages

cmdkReact

Fast, composable command palette for React — keyboard-driven search UI with fuzzy filtering and accessible markup out of the box.

@dnd-kit/coreReact

Modern, accessible drag-and-drop toolkit for React — fully customizable with keyboard support, collision detection, and zero dependencies.

embla-carousel-reactReact

Lightweight, extensible carousel library for React — smooth scrolling, touch/mouse drag, and full CSS control without prescribing markup.

flagsReact

Provider-agnostic feature flags SDK for Next.js and React — toggle features without redeploying.

framer-motionReact

Production-ready declarative animation library for React — gestures, layout animations, and scroll-driven effects with a clean API.