# React Hook Form vs Formik vs TanStack Form 徹底比較【2026年最新】— 選定基準と移行ガイド

> 2026年にReactのフォームライブラリをどう選ぶか。React Hook Form・Formik・TanStack Form を、再レンダリング戦略・バンドルサイズ・TypeScript推論・検証（Standard Schema）・メンテナンス状況・学習曲線の軸で公平に比較。新規プロジェクトの推奨、TanStack Formが向く条件、Formikからの段階的な移行手順までを実コードで解説します。

- 公開日: 2026-06-26
- 著者: 友田 陽大
- タグ: React, React Hook Form, TypeScript, 状態管理, Next.js, フォーム, 型安全, フロントエンド
- URL: https://tomodahinata.com/blog/react-hook-form-vs-formik-vs-tanstack-form-comparison-guide

## 要点

- 2026年の新規Reactプロジェクトの既定はReact Hook Form——最小級のバンドル・最良のTS推論・厚いエコシステム（Zod/shadcn）
- TanStack Formはヘッドレス＆クロスフレームワーク（React/Vue/Angular/Solid/Lit）で、型の厳密さやTanStack統一が要件なら有力
- Formikは新規非推奨。メンテナンスは低調で、制御主体の設計が20項目超のフォームで再レンダリング問題を生む
- 違いの核は再レンダリング戦略（RHF=非制御、Formik=制御、TanStack=フィールド単位購読）
- FormikからRHFへは一括ではなくフォーム単位で段階移行できる——両者は共存可能

---

「2026年、Reactのフォームは何で作るべきか」——この問いに、ポジショントークではなく**設計の事実**で答えます。この記事は各ライブラリの公式ドキュメント（[React Hook Form](/blog/react-hook-form)、[TanStack Form](https://tanstack.com/form/latest)、[Formik](https://formik.org/)）と最新の比較を一次情報に、選定基準と移行手順を整理します。

> **結論（先に）：** 新規 React プロジェクトの**既定は React Hook Form**。**TanStack Form** はクロスフレームワークや型の厳密さが要件なら有力な対抗馬。**Formik** は既存資産としては動くが、**新規採用は非推奨**（メンテナンス低調・制御主体ゆえの再レンダリングコスト）。以下、その根拠を述べます。

---

## 1. 設計思想の違い——ここが全ての分岐点

3つのライブラリは「フォーム状態をどう持つか」で根本的に違います。

- **React Hook Form（非制御）：** 入力値を `ref` で保持し、入力中は再レンダリングしない。速さと簡潔さが身上。
- **Formik（制御）：** すべての入力が React state で制御される。書きやすいが、入力のたびにフォームが再レンダリングされ、項目数が増えると重い。
- **TanStack Form（フィールド単位の購読）：** ヘッドレスで、各フィールドが自分の状態を購読する。フレームワーク非依存（React/Vue/Angular/Solid/Lit）で、型に厳密。

「制御 vs 非制御」の意味は [React Hook Form 完全ガイド](/blog/react-hook-form) で詳説しています。**この一点が、後述する性能・型・学習曲線のすべてに波及**します。

---

## 2. 比較表（2026年6月時点）

| 観点 | React Hook Form | Formik | TanStack Form |
| --- | --- | --- | --- |
| 状態モデル | 非制御（ref主体） | 制御（React state） | フィールド単位購読（ヘッドレス） |
| 再レンダリング | 最小（入力中ほぼ無） | 多い（入力ごとに全体） | 小（フィールド単位） |
| バンドルサイズ | 最小級 | 実効で大きめ（依存込み） | 軽量（ヘッドレス） |
| TypeScript推論 | 非常に強い | 普通 | 非常に強い（型駆動） |
| 検証 | resolver経由（Zod等）＋ Standard Schema | Yup中心（資産が多い） | Standard Schema直結（Zod/Valibot） |
| 対応フレームワーク | React/React Native | React | React/Vue/Angular/Solid/Lit |
| メンテナンス | 活発 | 低調（メンテモード） | 活発（v1安定） |
| エコシステム | 厚い（shadcn/resolvers/RN） | 縮小傾向 | 成長中 |
| 学習曲線 | やや独特（非制御の理解） | 易しい | やや高い（型・API） |

> **注意：** 数値は時期で動きます。本表は「相対的な傾向」を示すもので、最新の正確な数値は各公式・bundlephobia 等で確認してください。本質は数値より**設計の違い**です。

---

## 3. 再レンダリング戦略の違いが効く場面

これが実務で最も差が出る点です。

- **小さなフォーム（数項目）：** 体感差はほぼなし。どれでも良い。
- **大きなフォーム（20項目超・明細・ウィザード）：** Formik は入力のたびに全体が再描画され、もたつきやすい。RHF は非制御で入力中ほぼ再描画なし。TanStack はフィールド単位で再描画を閉じ込める。

つまり**「重いフォームほど Formik から離れる動機が強い」**。RHF と TanStack はどちらも再描画を抑える設計で、ここは互角です。RHF の最適化手法は [パフォーマンス最適化ガイド](/blog/react-hook-form-performance-rerender-optimization-guide) を参照。

---

## 4. 型安全と検証（Standard Schema 時代）

2026年の重要トレンドが **Standard Schema**——Zod・Valibot・ArkType などが共通インターフェースを実装し、ライブラリ側が特定の検証ライブラリに縛られなくなりました。

- **RHF：** `@hookform/resolvers` v5 で Zod 4・Valibot・ArkType・Standard Schema に対応。型推論は Zod との組み合わせで非常に自然。
- **TanStack Form：** Standard Schema を**第一級**で受け取る設計。`validators` にスキーマを直接渡せる。
- **Formik：** Yup 前提の資産が厚い。Zod も `toFormikValidationSchema` 等で繋げるが、TS 推論は RHF/TanStack ほど滑らかではない。

検証スキーマ設計そのものは [Zod 4 実践ガイド](/blog/zod) を参照。

---

## 5. それぞれを選ぶべき場面（決定ガイド）

**React Hook Form を選ぶ（既定）：**

- 新規の React / Next.js プロジェクト。
- Zod ＋ shadcn/ui のエコシステムに乗りたい。
- バンドル最小・最良の TS 推論・最大の実績と情報量がほしい。

**TanStack Form を選ぶ：**

- React 以外（Vue/Solid/Angular/Lit）でも**同じフォームロジック**を使い回したい。
- すでに TanStack Query / Router を採用し、思想を統一したい。
- 型の厳密さ・ヘッドレスの自由度を最重視する。

**Formik を選ぶ：**

- 原則「**新規では選ばない**」。
- 既存の Formik フォームがあり、いますぐ移行できない場合に限り維持。新規フォームは RHF で書き、段階移行する。

---

## 6. 三者の最小コード（公平に並べる）

### React Hook Form

```tsx
const { register, handleSubmit, formState: { errors } } = useForm({
  resolver: zodResolver(schema),
});
return (
  <form onSubmit={handleSubmit(onSubmit)} noValidate>
    <input {...register("email")} aria-invalid={!!errors.email} />
    {errors.email && <p role="alert">{errors.email.message}</p>}
  </form>
);
```

### TanStack Form

```tsx
const form = useForm({
  defaultValues: { email: "" },
  validators: { onChange: schema }, // Standard Schema (Zod) を直接
  onSubmit: async ({ value }) => onSubmit(value),
});
return (
  <form onSubmit={(e) => { e.preventDefault(); form.handleSubmit(); }}>
    <form.Field
      name="email"
      children={(field) => (
        <input
          value={field.state.value}
          onBlur={field.handleBlur}
          onChange={(e) => field.handleChange(e.target.value)}
          aria-invalid={field.state.meta.errors.length > 0}
        />
      )}
    />
  </form>
);
```

### Formik

```tsx
<Formik initialValues={{ email: "" }} validationSchema={yupSchema} onSubmit={onSubmit}>
  <Form>
    <Field name="email" />
    <ErrorMessage name="email" component="p" role="alert" />
  </Form>
</Formik>
```

3者とも書けますが、**RHF は非制御ゆえ `{...register}` が最短**、TanStack は**フィールド単位で明示的**（自由度が高い反面ボイラープレートはやや多い）、Formik は**制御ゆえ素直だが再描画コストを内包**します。

---

## 7. Formik → React Hook Form 移行ガイド

**大原則：一括移行しない。** 両者は同じアプリ内で共存できます。**フォーム単位で、触る順に**移行するのが安全（Boy Scout Rule）。

### 概念の対応表

| Formik | React Hook Form |
| --- | --- |
| `initialValues` | `useForm({ defaultValues })` |
| `validationSchema`（Yup） | `useForm({ resolver: zodResolver(schema) })` |
| `handleChange` / `handleBlur` | `register("name")` が内包 |
| `values` | `watch` / `useWatch` / `getValues` |
| `errors` / `touched` | `formState.errors` / `formState.touchedFields` |
| `isSubmitting` | `formState.isSubmitting` |
| `setFieldValue` | `setValue` |
| `setFieldError` | `setError` |
| `FieldArray` | `useFieldArray` |
| `<Field>` / `<ErrorMessage>` | `register` ＋ 自前のエラー表示（または shadcn の `FormField`） |

### Before（Formik）

```tsx
<Formik
  initialValues={{ email: "", name: "" }}
  validationSchema={Yup.object({ email: Yup.string().email().required() })}
  onSubmit={async (values, { setSubmitting }) => {
    await api.save(values);
    setSubmitting(false);
  }}
>
  {({ isSubmitting }) => (
    <Form>
      <Field name="email" type="email" />
      <ErrorMessage name="email" />
      <button type="submit" disabled={isSubmitting}>保存</button>
    </Form>
  )}
</Formik>
```

### After（React Hook Form ＋ Zod）

```tsx
const schema = z.object({ email: z.email(), name: z.string() });
type Schema = z.infer<typeof schema>;

const {
  register,
  handleSubmit,
  formState: { errors, isSubmitting },
} = useForm<Schema>({
  resolver: zodResolver(schema),
  defaultValues: { email: "", name: "" },
});

const onSubmit = async (values: Schema) => {
  await api.save(values); // RHF が isSubmitting を自動管理
};

return (
  <form onSubmit={handleSubmit(onSubmit)} noValidate>
    <input type="email" {...register("email")} aria-invalid={!!errors.email} />
    {errors.email && <p role="alert">{errors.email.message}</p>}
    <button type="submit" disabled={isSubmitting}>保存</button>
  </form>
);
```

移行で得られるもの：**バンドル減・再描画減・Zod による型と検証の一元化**。`shadcn/ui` を併用するなら `<Field>` の代わりに `FormField` を使えば a11y 配線も付いてきます（[shadcn × RHF × Zod ガイド](/blog/react-hook-form-shadcn-ui-zod-form-components-guide)）。

> **検証ライブラリの移行（Yup → Zod）：** フォーム移行と同時に Yup を Zod へ寄せると、スキーマを多用途（フォーム・API・DB）に使い回せます。ただし**一度に全部やらない**こと。まずフォーム配線を RHF にし、検証は既存の Yup を `@hookform/resolvers/yup` で繋いだまま動かし、後で Zod に差し替える二段階が安全です。

---

## 8. コスト・パフォーマンスの観点

- **バンドル：** RHF は最小級。Formik は実効サイズが大きく、モバイルや低速回線で不利。フォームが多い SaaS では積み上がります。
- **実行時：** 制御主体の Formik は大規模フォームで再描画が増え、INP を悪化させ得ます（[Core Web Vitals 最適化](/blog/core-web-vitals-nextjs-inp-lcp-cls-optimization-guide)）。
- **保守：** メンテナンスが活発なライブラリは、React/Next の新版追従や脆弱性対応が速い。新規で低調なライブラリを選ぶのは将来コストです。

「速い・安い・壊れにくい」を同時に満たす観点でも、新規は RHF が穏当な既定になります。

---

## 9. FAQ

**Q. 既存の Formik を全部 RHF に移すべき？**
A. 急ぐ必要はありません。動いているものは残し、**新規フォームは RHF**、触る既存フォームをついでに移す、で十分です。両者は共存できます。

**Q. TanStack Form は RHF を置き換える？**
A. 一概には言えません。React 単独・Zod・shadcn の組み合わせなら RHF の総合力が高い。一方、クロスフレームワークや TanStack 統一・型の厳密さが要件なら TanStack Form が勝ります。**要件で選ぶ**のが正解。

**Q. Yup を使い続けてもいい？**
A. 動かす分には可。ただし新規は Zod を推奨します。フォーム・API・DB でスキーマを使い回せ、TS 推論も滑らかです（[Zod 4 実践ガイド](/blog/zod)）。

**Q. React Native でも同じ選定？**
A. RHF は React Native を公式サポートしており、モバイルでも有力です。Formik も動きますが、性能面の懸念は同様です。

**Q. 結局どれ？**
A. **迷ったら React Hook Form。** 新規 React プロジェクトの 2026 年の既定解です。明確な理由（クロスフレームワーク等）があるときだけ TanStack Form を選んでください。

---

## まとめ：迷ったら RHF、ただし「要件で選ぶ」を忘れない

フォームライブラリ選定は、流行ではなく**設計の事実**で決めるべきです——

1. **新規の既定は React Hook Form。** 最小バンドル・最良の TS 推論・最大のエコシステムと実績。
2. **TanStack Form は明確な要件（クロスフレームワーク・型厳密・TanStack統一）があるとき**の有力な対抗馬。
3. **Formik は新規非推奨。** メンテ低調・制御主体の再描画コスト。既存は段階移行で。
4. **違いの核は再レンダリング戦略。** 重いフォームほど非制御／フィールド購読の価値が出る。
5. **移行は一括でなくフォーム単位**で。両者は共存でき、Boy Scout Rule で着実に減らせる。

技術選定は、その後数年の保守コスト・採用・性能を左右する意思決定です。だからこそ、**根拠を持って選び、根拠を説明できる**ことが信頼につながります。

**フォームライブラリの技術選定、Formik からの安全な移行計画、大規模フォーム基盤の設計が必要な場合は、お気軽にご相談ください。** 下記の事例では、技術選定の妥当性と事業制約を両立させながら、B2B SaaS を設計・実装した過程を紹介しています。