React Compiler v1.0

公開日: 2025-10-07

作者: Lauren Tan、Joe Savona、Mofei Zhang

React チームは新しいアップデートをお届けします: React Compiler 1.0 を本日リリースしました。コンパイラ駆動の lint ルールは eslint-plugin-react-hooks の recommended および recommended-latest プリセットで配布されています。インクリメンタル導入ガイドを公開し、Expo、Vite、Next.js と連携して新しいアプリがコンパイラを有効化した状態で開始できるようにしました。

このたび、コンパイラの最初の安定版リリースを発表します。React Compiler は React と React Native の両方で動作し、コンポーネントやフックを自動的に最適化（自動メモ化）します。コードの書き換えは不要です。コンパイラは Meta の主要アプリで実戦投入されており、本番利用に耐える準備が整っています。

概要

React Compiler はビルド時ツールで、自動メモ化により React アプリを最適化します。昨年、最初のベータを公開して多くのフィードバックと貢献を受け取りました。Sanity Studio や Wakelet の導入事例で得られた成果は有望であり、コンパイラをより多くの React コミュニティのユーザーに届けられることを嬉しく思います。

このリリースは、ほぼ 10 年にわたる大規模で複雑なエンジニアリングの集大成です。React チームのコンパイラへの最初の取り組みは 2017 年の Prepack でした。プロジェクトは最終的に終了しましたが、そこから得た多くの学びが Hooks の設計に影響を与え、将来のコンパイラを見据えた設計となりました。2021 年には Xuan Huang が新しい React Compiler の最初の試作をデモしました。最初の試作は書き直されましたが、代替コンパイラのアーキテクチャが我々の望むメモ化特性を実現できるという自信を高めました。

Joe Savona、Sathya Gunasekaran、Mofei Zhang、Lauren Tan は最初の書き直しを経て、コンパイラのアーキテクチャを制御フローグラフ(CFG) ベースの高レベル中間表現(HIR) に移行しました。これによりより精密な解析や React Compiler 内での型推論が可能になりました。その後も多くの部分が書き直され、それぞれの試行からの学びが反映されています。React チームの多くのメンバーからも大きな助力と貢献を受けました。

この安定版は多くのリリースの最初の一歩です。コンパイラは今後も進化し改善され続け、次の 10 年以上の React の新たな基盤と時代になることを期待しています。

クイックスタートにすぐ移ることもできますし、以下で React Conf 2025 のハイライトを読むこともできます。

---

深掘り: React Compiler はどう動くか

React Compiler は最適化コンパイラで、コンポーネントやフックを自動メモ化により最適化します。現在は Babel プラグインとして実装されていますが、コンパイラ自体は Babel から大きく切り離されており、Babel が提供する AST を独自の新しい HIR に変換し、複数のコンパイパパスを通じてデータフローやミュータビリティ（可変性）を精密に解析します。

これにより、レンダリングで使われる値を細かくメモ化できます。条件付きでのメモ化（手動のメモ化ではできない場合があります）も可能です。例:

import { use } from 'react';

export default function ThemeProvider(props) {
    if (!props.children) {
        return null;
    }
    // コンパイラは条件付きの早期 return の後でもコードをメモ化できます
    const theme = mergeTheme(props.theme, use(ThemeContext));
    return (
        <ThemeContext value={theme}>{props.children}</ThemeContext>
    );
}

この例は React Compiler Playground で確認できます。

自動メモ化に加え、React Compiler には React のルールを検証するパスもあります。これらのパスは Rules of React を符号化しており、データフローとミュータビリティの理解に基づいてルール違反の診断を行います。これらの診断はしばしば潜在的なバグを露呈し、主に eslint-plugin-react-hooks を通じて表面化します。詳細や最適化の仕組みについては Playground を参照してください。

今すぐ React Compiler を使う

コンパイラのインストール方法:

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

pnpm add --save-dev --save-exact babel-plugin-react-compiler@latest

yarn add --dev --exact babel-plugin-react-compiler@latest

安定版リリースの一環として、プロジェクトへの導入を容易にし、コンパイラが生成するメモ化の最適化を改善しました。React Compiler はオプショナルチェーンや配列インデックスを依存関係としてサポートするようになりました。これらの改善により、レンダー回数の削減や UI の応答性向上が期待でき、慣用的な宣言的コードをそのまま書き続けられます。詳細はドキュメントを参照してください。

本番環境での実績

コンパイラは Meta Quest Store のようなアプリですでに導入されています。初回読み込みやページ間遷移は最大で 12% 改善し、特定のインタラクションでは 2.5 倍以上高速化した例もあります。メモリ使用量は中立的に保たれています（改善の程度は環境に依存します）。アプリで試してみることを推奨します。

後方互換性

Beta 発表で述べたとおり、React Compiler は React 17 以降と互換性があります。まだ React 19 に移行していない場合は、コンパイラ設定で最小ターゲットを指定し、react-compiler-runtime を依存関係として追加することで React Compiler を利用できます。詳しくはドキュメントを参照してください。

コンパイラ駆動の lint による Rules of React の強制

React Compiler には Rules of React を破るコードを検出する ESLint ルールが含まれます。リントはコンパイラのインストールを必須としないため、eslint-plugin-react-hooks のアップグレードにリスクはありません。すべてのユーザーにアップグレードを推奨します。

すでに eslint-plugin-react-compiler をインストールしている場合は、それを削除して eslint-plugin-react-hooks@latest を使ってください。@michaelfaith に感謝します。

インストール方法:

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

pnpm add --save-dev eslint-plugin-react-hooks@latest

yarn add --dev eslint-plugin-react-hooks@latest

Flat Config の例 (eslint.config.js):

import reactHooks from 'eslint-plugin-react-hooks';
import { defineConfig } from 'eslint/config';

export default defineConfig([
  reactHooks.configs.flat.recommended,
]);

従来の設定 (.eslintrc.json) の例:

{
  "extends": ["plugin:react-hooks/recommended"]
  // ...
}

React Compiler のルールを有効にするには recommended プリセットを使うことを推奨します。README にも設定例があります。

React Conf で紹介した例:

• set-state-in-render: レンダーループを引き起こす setState パターンの検出
• set-state-in-effect: effect 内の高コスト処理を検出
• refs: レンダー中の安全でない ref アクセスを防止

useMemo、useCallback、React.memo に対する扱い

デフォルトでは、React Compiler は解析とヒューリスティックに基づいて自動的にコードをメモ化します。多くの場合、このメモ化は手動で書いたものと同等かそれ以上の精度になります。先に述べたように、コンパイラは早期 return の後のように useMemo / useCallback では扱えないケースでもメモ化できます。

ただし、開発者がメモ化をより厳密に制御したい場合もあります。useMemo と useCallback はエスケープハッチとして引き続き使用可能で、どの値をメモ化するか手動で指定できます。よくあるユースケースは、メモ化された値が effect の依存配列として使われる場合で、依存関係が実質的に変わらないのに effect が繰り返し発火することを防ぎたいときです。

新規コードではコンパイラにメモ化を任せ、必要に応じて useMemo / useCallback で精密な制御を行うことを推奨します。既存コードでは、既存のメモ化を残す（削除するとコンパイル出力が変わる可能性がある）か、削除する場合は慎重にテストすることをお勧めします。

新しいアプリは React Compiler を使うべき

Expo、Vite、Next.js チームと協力して、新しいアプリ体験にコンパイラを組み込みました。Expo SDK 54 以降ではコンパイラがデフォルトで有効になっており、新規アプリは最初からコンパイラの恩恵を受けられます。

npx create-expo-app@latest

Vite と Next.js ユーザーは create-vite と create-next-app でコンパイラ有効のテンプレートを選べます。

npm create vite@latest

npx create-next-app@latest

インクリメンタル導入

既存アプリを保守している場合は、段階的にコンパイラを導入できます。ゲーティング戦略、互換性チェック、ローアウトツールを網羅したインクリメンタル導入ガイドを公開しているので、自信を持ってコンパイラを有効にできます。

swc サポート（実験的）

React Compiler は Babel、Vite、Rsbuild など複数のビルドツールでインストール可能です。さらに、swc チームの Kang Dongyoon (@kdy1dev) と協力して、swc プラグインとしてのサポートを追加中です。作業は未完ですが、Next.js アプリで React Compiler を有効にすると Next.js のビルドパフォーマンスは大幅に向上するはずです。最良のビルド性能を得るには Next.js 15.3.1 以降を推奨します。

Vite ユーザーは vite-plugin-react を使い、コンパイラを Babel プラグインとして追加することで継続してコンパイラを有効化できます。oxc チームともサポートを進めています。rolldown が正式リリースされ Vite と oxc におけるサポートが整ったら、移行方法をドキュメントで更新します。

React Compiler のアップグレード

React Compiler が適用する自動メモ化は基本的にパフォーマンス向上を目的としています。将来のバージョンではメモ化の適用方法がより細かく精密になる可能性があります。しかし、プロダクトコードが JavaScript 上で静的に検出できない形で Rules of React を破ることがあり得るため、メモ化の変更が予期せぬ結果を招くことがあります。

例として、以前メモ化されていた値がコンポーネントツリー内のどこかで useEffect の依存として使われている場合を考えます。メモ化の有無や方法が変わると useEffect の発火回数が過剰または不足する可能性があります。useEffect は同期のために使うことを推奨しますが、コードベースによっては特定の値が変化したときのみ動かしたい等の別用途で使われている場合もあります。つまり、まれにメモ化変更が予期せぬ挙動を引き起こすことがあります。

このため、Rules of React に従い、アプリの E2E テストを継続的に行うことを推奨します。テストが十分でない場合は、コンパイラを SemVer 範囲（例: ^1.0.0）ではなく正確なバージョン（例: 1.0.0）で固定することを推奨します。--save-exact（npm/pnpm）や --exact（yarn）フラグを使ってインストールし、アップグレードは手動で行ってアプリが期待どおり動作するか確認してください。

---

謝辞: Jason Bonta、Jimmy Lai、Kang Dongyoon (@kdy1dev)、Dan Abramov によるレビューと編集に感謝します。

前の記事: React Conf 2025 Recap

次の記事: Introducing the React Foundation