React Compiler 1.0正式リリース｜useMemo・useCallbackを手動で書く時代の終わり

2025年10月、React Compiler v1.0が正式リリースされました。これはReact開発における最大級のパラダイムシフトの一つです。

useMemo、useCallback、React.memo を手動で書いてパフォーマンスチューニングする時代が、いよいよ終わりを迎えます。

React Compilerとは

React Compilerは、ビルド時にコンポーネントとフックを自動的にメモ化する最適化コンパイラです。Babel/SWCプラグインとして動作し、既存のコードを書き換えることなく、ビルドパイプラインに追加するだけでパフォーマンスが向上します。

従来、Reactアプリケーションのパフォーマンスチューニングには、開発者が明示的に以下のAPIを使う必要がありました。

useMemo — 計算結果のキャッシュ
useCallback — 関数参照の安定化
React.memo — コンポーネントの再レンダリング抑制

これらは正しく使えば効果的ですが、実際には「どこに入れるべきか」「依存配列は正しいか」といった判断が難しく、過剰なメモ化や逆に不足によるパフォーマンス劣化を招くことも多いものでした。

React Compilerは、この判断をすべてコンパイラが自動で行います。

自動メモ化の仕組み

React Compilerはビルド時にコンポーネントのコードを解析し、以下の最適化を自動で適用します。

値の再計算を回避 — 依存する値が変わっていなければ、前回の計算結果を再利用
関数参照の安定化 — 不要な関数の再生成を防ぎ、子コンポーネントの再レンダリングを抑制
条件付きメモ化 — 手動では実現困難だった、条件分岐を含む部分的なメモ化を自動で実現
JSXの再利用 — 変更のないJSXサブツリーをキャッシュして再利用

重要なのは、これらがすべてReactのルール（純粋性、副作用の制限など）に準拠したコードに対して安全に適用されるという点です。

Meta社内での実績

React CompilerはMeta社内で先行導入されており、具体的な成果が報告されています。

初期ロードが最大12%改善
一部のインタラクションが2.5倍以上高速化
Instagramの主要なサーフェスで本番投入済み

これらの数字は、手動メモ化を適切に行っていたコードベースでの改善であり、メモ化が不足していたプロジェクトではさらに大きな効果が期待できます。

導入方法

前提条件

React 17以降であれば導入可能
React 19未満の場合は react-compiler-runtime パッケージを追加
TypeScriptサポート済み

インストール

npm install -D babel-plugin-react-compiler

Vite（React + SWC）の場合

// vite.config.js
export default defineConfig({
  plugins: [
    react({
      babel: {
        plugins: ['babel-plugin-react-compiler'],
      },
    }),
  ],
});

Next.jsの場合

// next.config.js
module.exports = {
  experimental: {
    reactCompiler: true,
  },
};

段階的導入

いきなり全体に適用するのが不安な場合、特定のコンポーネントにのみ適用する opt-in モードも用意されています。

// babel設定
{
  plugins: [
    ['babel-plugin-react-compiler', {
      compilationMode: 'annotation',
    }],
  ],
}

opt-in モードでは、'use memo' ディレクティブを追加したコンポーネントだけがコンパイル対象になります。

コンパイラが解決しないこと

React Compilerは万能ではありません。以下の点は依然として開発者の責任です。

アーキテクチャ設計

コンポーネントの分割粒度、状態管理の設計、データフローの最適化は開発者が行う必要があります。

バーチャライゼーション

大量のリストアイテムをレンダリングする場合、react-window や @tanstack/react-virtual によるバーチャライゼーションはコンパイラの範囲外です。

ネットワーク最適化

データフェッチの戦略（プリフェッチ、キャッシュ、並列リクエスト）はコンパイラが介入する領域ではありません。

Reactのルールに違反するコード

副作用をレンダリング中に実行するなど、Reactのルールに違反するコードはコンパイラが正しく最適化できません。ESLintの react-compiler/react-compiler ルールで事前にチェックすることが推奨されています。

既存のuseMemo/useCallbackはどうする？

React Compilerを導入した後、既存のメモ化コードはどうすべきでしょうか。

結論としては、すぐに削除する必要はありません。コンパイラは手動メモ化と共存できるように設計されています。手動メモ化がある場合、コンパイラはそれを尊重しつつ、追加の最適化を行います。

ただし、長期的には手動メモ化を削除してコードをシンプルにすることが推奨されます。コンパイラの方がより細粒度で正確なメモ化を行えるためです。

React Compilerの恩恵を最大限に活かすには、Reactの基礎とパフォーマンスの考え方をしっかり理解しておくことが重要です。

モダンJavaScriptの基本から始める React実践の教科書

Reactの基礎概念からHooks、状態管理、レンダリング最適化まで体系的に学べます。コンパイラが自動化する部分の仕組みを理解するのに最適です。

¥2,860 Amazonで見る

※ アフィリエイトリンクを含みます

Reactハンズオンラーニング第2版

Reactのコンポーネント設計やパフォーマンスパターンを実践的に学べるオライリーの定番書。React Compilerが最適化する対象の理解が深まります。

¥3,520 Amazonで見る