React Compilerが正式版に——「useMemoを書かない」時代が本当に来た

「メモ化芸」から解放される日

React開発者を長年悩ませてきた「このuseMemo、本当に必要？」という判断——React Compilerの正式リリースによって、その悩みの多くが過去のものになりつつある。React Compilerはコンポーネントのソースコードを静的解析し、再レンダリングで結果が変わらない値・関数を自動的にメモ化するビルド時ツールだ。開発者がuseMemo・useCallback・React.memoを手で書く必要は、原則としてなくなる。

何がどう変わるのか

• 手動メモ化の廃止：コンパイラがコンポーネント内の依存関係を解析し、必要な箇所だけを自動的にメモ化する。書き忘れによるパフォーマンス劣化も、過剰なメモ化によるコードの見通しの悪化も起きにくくなる。
• ESLintルールとの連携：Compilerが安全に最適化できないパターン（ルール違反のフック呼び出しなど）を検知し、ビルド時・Lint時に警告する仕組みが用意されている。
• 段階的導入が可能：ディレクトリ単位・ファイル単位でCompilerの適用有無を制御できるため、大規模な既存プロジェクトでも一気に書き換える必要はない。

既存プロジェクトへの導入手順

導入の基本フローは次の通り。

• 1. babel-plugin-react-compilerを追加：Vite・Next.jsなど主要なビルドツールは公式プラグインが用意されている。
• 2. ESLintプラグインを有効化：Compilerが最適化できないコードをCIの段階で検出できるようにする。
• 3. 一部のディレクトリから試験導入：まずは新規機能や依存の少ないコンポーネントから適用し、レンダリング回数やバンドルサイズの変化を計測する。
• 4. 既存のuseMemo/useCallbackは急いで消さない：Compilerは既存の手動メモ化と共存できる設計になっているため、動作確認が済むまでは残しておいて問題ない。

注意すべき落とし穴

Compilerは「Reactのルールに従っているコード」を前提に最適化を行う。条件分岐の中でフックを呼び出す、コンポーネント外部の可変変数に直接依存するなど、ルール違反のパターンがあると最適化がスキップされたり、意図しない挙動になることがある。ESLintルールを併用し、警告が出ている箇所は優先的に修正するのが安全だ。また、サードパーティのライブラリ内部のコンポーネントには当然ながらCompilerは効かないため、パフォーマンスが重要な自作コンポーネントから適用範囲を広げていくのが現実的な進め方になる。

まとめ

React Compilerの正式リリースは、「Reactらしい書き方をすれば速いコードになる」という状態への回帰を意味する。既存プロジェクトを無理に全面移行する必要はなく、新規コンポーネントや負荷の高い画面から段階的に試すのが現実的だ。日本語の実践的な移行事例が増えるまでにはもう少し時間がかかりそうだが、社内の新規プロジェクトから触れておく価値は十分にある。