React Compiler を検証してみた

この記事は KINTO テクノロジーズ Advent Calendar 2025 の 25 日目の記事です 🎅🎄

はじめに

こんにちは！
KINTO 開発部 KINTO バックエンド開発 G マスターメンテナンスツール開発チーム、技術広報 G 兼務、Osaka Tech Lab 所属の high-g（@high_g_engineer）です。フロントエンドエンジニアをやっています。

現在開発中のプロジェクトでは、RC 版の頃から React Compiler を導入しており、約 8 ヶ月が経ちました。
導入によって useMemo や useCallback を書かなくても自動でメモ化されるため、メモ化を意識する必要がなくなり、開発体験は向上しました。
しかし、実際にどの程度メモ化が正しく行われているのか、パフォーマンスにどれくらいの影響があるのかは、詳しく検証できていませんでした。
そこで本記事では、React Compiler の有効時の挙動や、有効時と無効時のパフォーマンス比較を検証してみることにしました。

React Compiler とは

https://ja.react.dev/learn/react-compiler/introduction

React Compiler は、ビルド時に自動的にメモ化を行うことで React アプリを最適化するツールです。
そのため、React Compiler を導入すれば、useMemo や useCallback、React.memo などを手動で書く必要がなくなります。

最初の安定版（v1.0）は 2025 年 10 月 7 日にリリースされ、この記事が執筆された時点で約 2 か月半が経過しています。

安定版リリースまでの経緯は以下の通りです。

• 2023 年 3 月 - 「React Forget」として開発、Meta 社内の限定的な領域で production 利用開始
• 2023 年 10 月 - React Advanced Conference 2023 で「React Forget」として公開発表
• 2024 年 2 月 - instagram 全体で production 展開完了、Meta 社内の他サービスへ展開、OSS 化準備と発表
• 2024 年 5 月 - React Conf 2024 で experimental release を発表
• 2024 年 10 月 21 日 - Beta release を公開
• 2025 年 4 月 21 日 - Release Candidate (RC) を公開
• 2025 年 10 月 7 日 - v1.0 安定版リリース

React Compiler の設定方法

Vite と React 19 を使用した環境での React Compiler の設定方法を紹介します。

1. パッケージのインストール

pnpm add -D babel-plugin-react-compiler

2. vite.config.ts の設定

@vitejs/plugin-react の babel オプションに babel-plugin-react-compiler を追加します。

import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";

// 設定オプション
const ReactCompilerConfig = {
  /* ... */
};

export default defineConfig({
  plugins: [
    react({
      babel: {
        plugins: [["babel-plugin-react-compiler", ReactCompilerConfig]],
      },
    }),
  ],
});

これだけで設定は完了です。後はビルド時に React Compiler が自動的にコードを解析し、必要な箇所にメモ化を適用してくれます。

React Compiler の設定オプションに関しては、本記事では説明を割愛します。
特に設定しなくても動作しますが、詳細を知りたい方は以下を参照してください。

https://ja.react.dev/reference/react-compiler/configuration

ベンチマーク対象の React アプリ

実際の開発プロジェクトで検証を試みましたが、使用しているライブラリに既にメモ化されたコンポーネントが多く含まれていて、純粋な比較が困難だったので、ベンチマーク専用のプロジェクトを作成しました。
ヘッダー、サイドメニュー、メインコンテンツのエリアで構成され、初期表示時の合計コンポーネント数は約 100 個です。

最初に、React Compiler が無効の状態で、React Dev Tools でメモ化の状況を確認していきます。Components タブを見ると、メモ化されている場合に表示される「Memo」のラベルが一切ないことがわかります。

次に、React Dev Tools の設定で Highlight updates when components render にチェックを入れて、上位にあるボタンコンポーネントをクリックし再レンダリングの様子を確認すると、本来再レンダリングが不要な子孫コンポーネントにも再レンダリングが発生していることが分かります。

React Compiler のメモ化の挙動

React Compiler を有効にして開発サーバーを立ち上げ、同じアプリがメモ化されているかを確認します。
React Dev Tools の Components タブを確認すると、「Memo」のラベルが数多く表示されていることが分かります。

同様に、上位にあるボタンコンポーネントをクリックし、React Dev Tools で再レンダリングの状態を確認すると、再レンダリングが必要最小限に抑えられていることが分かります。

React Compiler のパフォーマンスベンチマーク

ここからは、React Compiler によるパフォーマンスの差を React Dev Tools の Profiler を用いて検証していきます。

検証では、下記の赤枠のボタンを約 1 秒間隔で 10 回連続クリックした際の、レンダリング時間の比較を行いました。

このボタンはメインコンテンツの最上位に配置されているため、クリック時に多くの子孫コンポーネントへ再レンダリングの影響が波及します。

React Compiler 無効時（メモ化なし）

計測データ

• 1回目: 29ms
• 2回目: 34.5ms
• 3回目: 36.1ms
• 4回目: 33.9ms
• 5回目: 36.3ms
• 6回目: 17.6ms
• 7回目: 35.1ms
• 8回目: 32.1ms
• 9回目: 33.3ms
• 10回目: 36.8ms

平均レンダリング時間
32.5ms

Flamegraph を見ると、すべての子孫コンポーネントがレンダリングされていることが分かります。また、MainContents 以外にもレンダリング時間が長いコンポーネント（黄色やオレンジ色で表示）が存在し、本来不要な再レンダリングが発生していることが確認できます。

React Compiler 有効時（メモ化あり）

計測データ

• 1回目: 11.1ms
• 2回目: 12.1ms
• 3回目: 12.2ms
• 4回目: 12.1ms
• 5回目: 12.1ms
• 6回目: 12.1ms
• 7回目: 12.1ms
• 8回目: 12.0ms
• 9回目: 12.0ms
• 10回目: 12.6ms

平均レンダリング時間
12.0ms

Flamegraph を見ると、グレーの斜線で表示されているコンポーネントが多数確認でき、再レンダリングが必要最小限に抑えられていることが分かります。

パフォーマンス改善の結果

React Compiler を有効にしただけで、非常に大きなパフォーマンス改善ができていることが確認できました。
今回はメモ化を全く行っていないプロジェクトとの比較のため、すべてのケースで同様の改善が見込めるわけではありませんが、導入効果は十分に期待できます。

懸念点

ライブラリとの相性

現在開発中のプロジェクトでは TanStack Table を利用しています。TanStack Table は新しい参照を意図的に生成することで再レンダリングをトリガーする設計のため、React Compiler によるメモ化が適用されると、再レンダリングが発生せず意図しない挙動を引き起こす可能性があります。

この問題に対しては、"use no memo" ディレクティブを追加して部分的に React Compiler を無効化することで対応が可能です。

function TableComponent() {
  "use no memo";

  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
  });

  return (
    <table>
      {/* TanStack Table の参照変化に依存する処理 */}
    </table>
  );
}

react-hook-form など、同様に参照の変化に依存するライブラリを利用する場合は、要所で "use no memo" の記述が必要になるため、導入時にはご注意ください。

ビルド速度低下、ビルドファイルサイズ上昇

React Compiler を導入すると、再レンダリング時のパフォーマンスは向上しますが、メモ化のためのコードが追加されるため、ビルド速度やファイルサイズに多少影響が出ます。その結果、初回読み込みが少し遅くなる可能性があります。

React Compiler 無効時のビルド結果

• ビルド時間: 64ms
• ファイルサイズ: 232KB

React Compiler 有効時のビルド結果

• ビルド時間: 556ms
• ファイルサイズ: 248KB

まとめ

今回は React Compiler を有効にしたときのメモ化に関する挙動の確認と、パフォーマンスにどれくらい影響があるのかを検証してみました。
結果として、メモ化が正しく動作し、そのおかげでパフォーマンス改善も十分に期待できることが分かりました。

ただし、いくつか注意点もあります。
参照の変化に依存するライブラリを使用する場合は、"use no memo" で部分的に無効化が必要になることがあります。また、メモ化のコードが追加される分、ビルド速度やファイルサイズには多少影響が出ます。

とはいえ、これらは対処可能な範囲ですし、パフォーマンス改善だけでなくメモ化を意識しなくて済むというメリットは非常に大きいです。React Compiler の導入を迷われている方は、ぜひ試してみてください。

最後まで読んでいただきありがとうございました。

参考記事

https://ja.react.dev/learn/react-compiler/introduction
https://ja.react.dev/reference/react-compiler/configuration
https://reactadvanced.com/2023/
https://conf2024.react.dev/
https://react.dev/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023
https://react.dev/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024
https://react.dev/blog/2025/10/07/react-compiler-1
https://github.com/TanStack/table/issues/5567