# React Hook Form — Performant Forms with Easy Validation

> React Hook Form is a performant, flexible and extensible forms library for React with easy-to-use validation. Minimizes re-renders by leveraging uncontrolled components and refs, achieving the fastest form library for React.

## Install

Save in your project root:

## Quick Use

```bash
npm i react-hook-form
```

```tsx
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>
  );
}
```

## Intro

React Hook Form is the fastest forms library for React. Uses uncontrolled inputs + refs internally so the parent component never re-renders on every keystroke. Trusted by Microsoft, Apple, Amazon, and many enterprise apps.

- **Repo**: https://github.com/react-hook-form/react-hook-form
- **Stars**: 44K+
- **Size**: ~9KB gzipped, zero deps
- **License**: MIT

## What React Hook Form Does

- **Uncontrolled inputs** — refs instead of state, near-zero re-renders
- **Validation** — built-in rules + Zod/Yup/Joi resolvers
- **Field arrays** — dynamic add/remove fields
- **Error handling** — typed errors object
- **Watch** — subscribe to specific fields
- **Form context** — share form across components
- **DevTools** — browser extension to inspect forms

## Architecture

`register()` returns props (`onChange`, `onBlur`, `ref`) you spread on inputs. The library tracks values via refs, not React state. `handleSubmit` validates and calls your callback with typed data. `formState` is a proxy that only re-renders subscribers.

## Self-Hosting

Client library, no backend.

## Key Features

- Smallest forms library (9KB)
- Zero dependencies
- Built-in validation + schema resolvers (Zod, Yup, Joi, Valibot)
- Watch API for reactive logic
- Field arrays for dynamic forms
- TypeScript-first
- DevTools extension
- Works with React Native

## Comparison

| Library | Strategy | Re-renders | Validation | Bundle |
|---|---|---|---|---|
| React Hook Form | Uncontrolled | Minimal | Built-in + resolvers | 9KB |
| Formik | Controlled | Many | Yup | 13KB |
| TanStack Form | Controlled | Granular | Standard Schema | 12KB |
| Final Form | Subscription | Minimal | Custom | 5KB |

## 常见问题 FAQ

**Q: 和 Zod 怎么配合？**
A: 用 `@hookform/resolvers/zod`，传 `resolver: zodResolver(schema)`。表单类型自动从 schema 推断。

**Q: 受控组件怎么办？**
A: 用 `Controller` 组件包装第三方 UI（MUI、AntD 等）。提供 controlled adapter。

**Q: SSR 友好吗？**
A: 友好。所有状态在 ref 里，不影响 hydration。

## 来源与致谢 Sources

- Docs: https://react-hook-form.com
- GitHub: https://github.com/react-hook-form/react-hook-form
- License: MIT

---
Source: https://tokrepo.com/en/workflows/89ca2f75-356f-11f1-9bc6-00163e2b0d79
Author: AI Open Source