React Compiler 実践入門 - useMemo / useCallback を手で書く前に知っておくこと

React Compiler 実践入門 - useMemo / useCallback を手で書く前に知っておくこと

作成日:
更新日:
ReactReact CompilerフロントエンドパフォーマンスNext.js

useMemo、useCallback、React.memo——再レンダリングを抑えるための手動メモ化は、React 開発の「お作法」であり、同時に「書き忘れ」「依存配列のミス」の温床でもありました。

React Compiler は、このメモ化を自動化します。すでに安定版となり、Meta をはじめ本番で広く使われています。この記事では、React Compiler で何ができて何が消せるのか、それでも手動メモ化が要る場面、そして導入方法を、実践的な判断目線で整理します。

React Compiler は何をするのか

React Compiler は、ビルド時にコードを解析し、必要な箇所へ自動でメモ化を適用します。これまで手で書いていた以下が、基本的に不要になります。

これまで（手動メモ化）
const MemoizedComponent = React.memo(Component)
const value = useMemo(() => expensiveCalc(a, b), [a, b])
const handleClick = useCallback(() => doSomething(id), [id])

コンパイラがコンポーネントと値の依存関係を解析し、再計算・再生成が不要な箇所を自動で memo 化します。結果として、ボイラープレートが減り、「依存配列の書き間違いによるバグ」の温床そのものが小さくなります。

ポイントは「最適化を頑張る」ことではなく、最適化を考えなくてよくすることです。パフォーマンスのためのコードを書く認知コストを、コンパイラに肩代わりさせる発想です。

ステータスと対応バージョン

項目内容
安定性安定版（Meta など本番で実績あり）
対応 ReactReact 17 / 18 / 19
導入形態Babel プラグイン（Babel / Vite / Metro / Rsbuild 等に対応）
Next.jsv15.3.1 以降で SWC 経由で有効化可能

React 19 専用ではなく、17・18 でも使えるのが実務上ありがたい点です。いきなり19へ上げられないプロジェクトでも導入を検討できます。

NOTE

公式は「現時点ではオプションだが、将来一部の機能はコンパイラを前提にする可能性がある」としています。今のうちに Rules of React（Reactのルール）に沿ったコードにしておくと、移行がスムーズです。

導入方法

Babel プラグインとして入れるのが基本です。

インストール
npm install -D babel-plugin-react-compiler

Vite なら Babel 設定にプラグインを足します。

vite.config.js（抜粋）
export default defineConfig({
  plugins: [
    react({
      babel: {
        plugins: [['babel-plugin-react-compiler', {}]],
      },
    }),
  ],
})

Next.js は v15.3.1 以降で、設定から SWC 経由で有効化できます（Babel を別途用意しなくてよい）。あわせて、ESLint で「コンパイラが最適化できない書き方」を検出するルールを入れておくと、書きながら気づけます。

それでも手動メモ化が要る場面

「全部コンパイラに任せれば手動メモ化はゼロ」かというと、そうではありません。公式も、手動メモ化が今も有効なケースを挙げています。

  • effect の依存に使う値: メモ化した値を useEffect の依存配列に使う場合、「意味的に変わっていないのに effect が再発火する」のを防ぐため、手動メモ化が役立つことがある
  • コンパイラのヒューリスティックより細かく制御したいとき: メモ化の挙動を厳密にコントロールしたい場合
  • 既存コードの移行時: すでにある手動メモ化は、無闇に外すとコンパイル結果が変わり得る。「残す」か「慎重にテストしてから外す」のが安全

TIP

移行のコツは「いきなり既存の useMemo/useCallback を全削除しない」こと。まずコンパイラを有効にし、新規コードは手動メモ化なしで書く。既存分は動作を確認しながら段階的に整理する、が安全な順序です。

導入を判断するときの視点

  • 新規プロジェクト: 最初から有効にしてよい。手動メモ化を書かない前提で進められる
  • 既存プロジェクト: React 17+ なら導入候補。まず有効化して新規コードから恩恵を受け、既存の手動メモ化は段階的に
  • Rules of React 違反が多いコードベース: コンパイラが最適化を諦める箇所が出る。ESLint ルールで違反を洗い出してから入れると効果的
  • 過度な期待は禁物: コンパイラは「不要な再レンダリングを減らす」もので、アルゴリズムレベルの遅さや過大なデータ取得は別問題。プロファイリングは引き続き必要

まとめ

  • React Compiler は安定版。useMemo/useCallback/React.memo の手動メモ化を自動化する
  • React 17/18/19 に対応。Babel プラグインで導入、Next.js は v15.3.1+ で SWC 経由
  • 「最適化を頑張る」のではなく「最適化を考えなくてよくする」ツール。依存配列ミスの温床を減らせる
  • 手動メモ化が今も要る場面はある: effect 依存に使う値、細かい制御、既存コードの移行時
  • 既存プロジェクトは「有効化 → 新規は手動メモ化なし → 既存は段階的に整理」が安全な順序
  • コンパイラは万能ではない。アルゴリズムやデータ取得の遅さは別問題でプロファイリングは継続

「メモ化、書いたっけ？」という小さな気疲れから解放されるだけでも、React Compiler を入れる価値はあります。新規プロジェクトならまず有効にして、手動メモ化を書かない開発を体験してみてください。

参考リンク