2025年10月7日、React Compiler 1.0が正式リリースされた。Metaの大規模アプリでの実戦テストを経て、本番環境での使用が公式に推奨されている。useMemoとuseCallbackに悩まされた時代は終わりを迎えつつある。本稿では、React Compilerの仕組み、導入戦略、そして手動メモ化がまだ必要なケースを解説する。

React Compilerが解決する問題

従来のReactでは、パフォーマンス最適化は開発者の責任であった。useMemo、useCallback、React.memoを適切に配置し、依存配列を正しく管理する必要があった。しかし、この手動最適化は認知的負荷が高く、過剰なメモ化や依存配列の誤りによるバグを引き起こしやすかった。

React Compilerは、コンポーネントの依存関係グラフを解析し、ビルド時に適切な最適化を自動挿入する。純粋コンポーネントとpropsを自動的にメモ化し、不要な再計算を排除する。これにより、開発者は手動最適化のオーバーヘッドと落とし穴から解放される。

Compilerは「fine-grained reactivity（きめ細かな反応性）」とも呼ばれる最適化を適用する。状態が変化した際に、アプリの関連部分のみが再レンダリングされるよう自動的に保証する。

本番環境での実績とパフォーマンス向上

Metaは、Meta Quest StoreでReact Compilerを本番導入し、初期ロード時間が最大12%高速化、インタラクションが2.5倍以上高速化したと報告している。ただし、結果はアプリケーションによって異なる。

Sanity Studioのケースでは、1,411コンポーネント中1,231コンポーネントがコンパイル対象となり、レンダリング時間とレイテンシが全体で20〜30%削減された。これらの数値は、手動最適化に多くの時間を費やすことなく達成されている。

React Compilerは、Babel、Vite、Metro、Rsbuildなど複数のビルドツールでインストール可能である。既存のReactおよびReact Nativeプロジェクトに、書き換えなしで導入できる。

useMemoとuseCallbackの現状

重要な点として、useMemoとuseCallbackは非推奨ではない。React Compilerは多くの状況でこれらを不要にするが、引き続きサポートされている。「エスケープハッチ」として、どの値をメモ化するかを制御したい場合に使用できる。

しかし、新規コードでこれらのフックを積極的に使用する必要性は大幅に低下した。Compilerが自動的に同等の最適化を適用するため、手動メモ化はほとんどの場合冗長となる。

既存のコードベースについては、useMemo/useCallbackを即座に削除する必要はない。Compilerは既存のメモ化コードと共存でき、段階的な移行が可能である。

手動メモ化がまだ必要なケース

いくつかのエッジケースでは、手動メモ化が依然として必要である。第一に、参照同一性（identity）で比較するサードパーティライブラリを使用する場合である。React Compilerの最適化を認識しないライブラリでは、明示的なメモ化が必要になることがある。

第二に、Reactの最適化が検出しない極めて高コストな計算を行う場合である。複雑なアルゴリズムや大量データの処理など、明示的な制御が望ましいケースが存在する。

第三に、厳密な参照等価性に依存するメモ化された子コンポーネントに関数を渡す場合である。子コンポーネントがReact.memoでラップされ、props比較が参照ベースの場合、親でのuseCallbackが有効な場合がある。

本番導入のベストプラクティス

本番導入にあたっては、段階的なアプローチが推奨される。まず、React ProfilerとアプリのパフォーマンスマーカーでWin/Neutral（改善/中立）を確認する。次に、フィーチャーフラグの背後でデプロイし、安定化後に展開を拡大する。

Compilerは純粋性を前提としているため、レンダリング中の副作用はuseEffectまたはサーバーコードに移動する必要がある。データが変更された場合は常に新しいオブジェクト/配列を作成し、インプレース変更を避ける。隠れた変更を持つシングルトンは避け、React state、context、または予測可能なストアを優先する。

また、参照同一性で比較するサードパーティライブラリについては、useMemo/useCallbackを保持することが推奨される。Compilerの最適化とライブラリの期待が一致しない可能性があるためである。

FAQ

React Compilerを使うにはReact 19が必要ですか？

React Compiler 1.0はReact 17、18、19で動作する。ただし、React 19との組み合わせで最大の恩恵を受けられる。

既存のuseMemo/useCallbackはすぐに削除すべきですか？

即座に削除する必要はない。Compilerは既存のメモ化コードと共存でき、段階的な移行が可能である。新規コードではCompilerに任せ、既存コードは徐々にリファクタリングするのが現実的である。

すべてのコンポーネントがコンパイルされますか？

Compilerの制約（純粋性など）を満たさないコンポーネントはスキップされる。eslint-plugin-react-compilerを使用すると、コンパイル対象外のコンポーネントを特定できる。

React Nativeでも使用できますか？

React CompilerはReactとReact Nativeの両方で動作する。Metroビルドツールでの設定が可能である。

参考文献