第14章 React Compiler

14.1 概要

React Compilerは、コンポーネントとHooksを解析し、自動メモ化するビルド時コンパイラである。1.0は安定版である。

従来:

const filtered = useMemo(
  () => expensiveFilter(items, query),
  [items, query]
);

const handleSelect = useCallback(
  (id: string) => onSelect(id),
  [onSelect]
);

export default memo(ItemList);

Compiler適用後は、純粋性などの規則を満たすコードを自動的に最適化できる。

function ItemList({ items, query, onSelect }: Props) {
  const filtered = expensiveFilter(items, query);

  return filtered.map(item => (
    <button key={item.id} onClick={() => onSelect(item.id)}>
      {item.name}
    </button>
  ));
}

14.2 Compilerが前提とする規則

• コンポーネントとHooksは純粋
• propsとstateを直接変更しない
• Hooksのルールを守る
• レンダリング中に副作用を起こさない
• 値のライフタイムを不自然に壊さない
• 参照の安定性に依存する外部仕様を理解する

14.3 導入

代表的なパッケージ:

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

実際の設定方法は、Vite、Next.js、React Nativeなど環境により異なるため、各公式統合ガイドを確認する。

14.4 ESLint診断

Compilerの解析結果やReactの規則違反は、eslint-plugin-react-hooksを通じて検出される。

重要なのは「全ファイルがコンパイルされなければ導入失敗」ではない。問題のあるコンポーネントをCompilerがスキップし、他を最適化できる場合がある。

14.5 段階導入

• 特定ディレクトリだけに適用
• "use memo"でopt-in
• ランタイムゲーティング
• パフォーマンス監視を伴う展開

既存の手動メモ化は一度に削除せず、動作テストと計測を行う。

14.6 ディレクティブ

function Component() {
  "use memo";
  // Compilerへ明示的な最適化意図
}

function Component() {
  "use no memo";
  // 特定コードを最適化対象外にする
}

これらは常用するものではなく、移行・互換性上の制御として扱う。

14.7 手動メモ化が残る場面

• 外部ライブラリが参照同一性を契約にしている
• Effect依存関係の安定化に意味がある
• Compiler対象外コード
• ライブラリの公開API
• 計測で明確な改善が確認できる
• 意味的にキャッシュを保持したい

useMemoは意味上の保証ではなく、パフォーマンス最適化である。コードの正しさをuseMemoだけに依存させない。

---