2025年10月7日、React チームは React Compiler v1.0 を正式リリースした。このビルドツールは、従来開発者が手動で行っていたメモ化処理を自動化し、useMemo、useCallback、React.memo の明示的な使用を大幅に削減する。Meta の Quest Store では初期読み込みが最大12%高速化、特定のインタラクションが2.5倍以上高速化するなど、実運用での成果が報告されている。

React Compiler とは何か

React Compiler は、React コンポーネントとフックをビルド時に解析し、必要な箇所に自動でメモ化コードを挿入するツールである。内部では Control Flow Graph（CFG）ベースの High-Level Intermediate Representation（HIR）に変換し、データフロー分析を行うことで、人間が手動で書くよりも精密なメモ化を実現する。

従来、Reactアプリケーションのパフォーマンス最適化には、開発者がuseMemoやuseCallbackを適切な箇所に配置する必要があった。しかし、これらのフックの使いどころを誤ると逆にパフォーマンスが悪化したり、コードの可読性が低下したりする問題があった。React Compiler はこの課題を根本から解決する。

主な機能と特徴

React Compiler の主要な機能は以下の通りである。

  • 自動メモ化：コンポーネントとフックを解析し、再レンダリングを最小化するメモ化コードを自動挿入
  • 条件分岐後のメモ化：early return の後のコードもメモ化可能（useMemoでは不可能だった）
  • React 17以上に対応：既存プロジェクトへの段階的導入が可能
  • React Native サポート：モバイルアプリにも同様の最適化を適用
  • コンパイラ駆動の Lint ルール：eslint-plugin-react-hooks に統合され、ルール違反を検出

特に条件分岐後のメモ化は、従来の手動メモ化では実現できなかった機能である。以下のようなコードでも、React Compiler はmergeThemeの呼び出しを適切にメモ化できる。

export default function ThemeProvider(props) {
  if (!props.children) {
    return null;
  }
  // コンパイラは条件付き返却後もメモ化可能
  const theme = mergeTheme(props.theme, use(ThemeContext));
  return (
    <ThemeContext value={theme}>
      {props.children}
    </ThemeContext>
  );
}

導入方法

新規プロジェクトでは、主要なフレームワークが React Compiler をデフォルトまたはオプションでサポートしている。

  • Expo SDK 54以上：デフォルトで有効
  • Next.js 15.3.1以上：create-next-app で選択可能、安定版サポート
  • Vite：create-vite で選択可能

既存プロジェクトへの導入は、Babel プラグインとしてインストールする。

npm install --save-dev --save-exact babel-plugin-react-compiler@latest

ESLint ルールも併せて導入することで、コンパイラが最適化できないコードパターンを事前に検出できる。

npm install --save-dev eslint-plugin-react-hooks@latest

パフォーマンス改善の実績

Meta の Quest Store での運用実績では、以下の改善が報告されている。

  • 初期読み込み：最大12%高速化
  • クロスページナビゲーション：最大12%高速化
  • 特定インタラクション：2.5倍以上高速化
  • メモリ使用量：増加なし（中立）

これらの数値は、大規模な本番環境での検証結果であり、React Compiler が実用的なパフォーマンス改善をもたらすことを示している。

useMemo/useCallback の今後

React チームは、React Compiler の導入後もuseMemoとuseCallbackを完全に廃止するわけではないとしている。これらは「エスケープハッチ」として、effect の依存関係で参照同一性の厳密な制御が必要な場合に引き続き利用可能である。

ただし、新規コードについてはコンパイラに依存することが推奨されている。手動メモ化は、コンパイラが対応できない特殊なケースにのみ使用すべきである。既存コードからuseMemo/useCallbackを削除する際は、十分なテストを行ってから段階的に進めることが推奨されている。

FAQ

React Compiler は既存のプロジェクトにも導入できますか？

はい、React 17以上であれば導入可能である。Babel プラグインとしてインストールし、段階的に適用範囲を広げる方法が公式ドキュメントで案内されている。

useMemo や useCallback は完全に不要になりますか？

ほとんどのケースでは不要になる。ただし、effect の依存関係で参照同一性を厳密に制御したい場合など、特殊なケースではエスケープハッチとして引き続き利用可能である。

React Native アプリにも使えますか？

はい、React Compiler は React Native にも対応している。Expo SDK 54以上では、新規プロジェクトでデフォルトで有効化されている。

コンパイラを使うとビルド時間は増加しますか？

若干の増加があるが、Next.js 15.3.1以上では SWC プラグインとの連携により、ビルドパフォーマンスが大幅に改善されている。

参考文献