インストール

前提条件

React Compiler は React 19 で最適に動作するよう設計されていますが、React 17 および 18 もサポートしています。詳細については React バージョン互換性をご覧ください。

インストール

React Compiler を devDependency としてインストールします。

Yarn を使用する場合：

pnpm を使用する場合：

基本的なセットアップ

React Compiler は、デフォルトで設定なしで動作するように設計されています。ただし、特別な状況で設定が必要な場合（例えば、React 19 未満のバージョンを対象とする場合）は、コンパイラオプションリファレンスを参照してください。

セットアッププロセスは使用するビルドツールによって異なります。React Compiler には、ビルドパイプラインと統合して動作する Babel プラグインが含まれています。

Babel

babel.config.js を作成または更新します。

module.exports = {
  plugins: [
    'babel-plugin-react-compiler', // must run first!
    // ... other plugins
  ],
  // ... other config
};

Vite

Vite を使用している場合は、プラグインを vite-plugin-react に追加できます。

// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

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

または、Vite 用の Babel プラグインを別に使用したい場合は以下のようにします。

// vite.config.js
import babel from 'vite-plugin-babel';
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

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

Next.js

詳細については Next.js ドキュメントを参照してください。

React Router

vite-plugin-babel をインストールし、コンパイラの Babel プラグインを追加します。

// vite.config.js
import { defineConfig } from "vite";
import babel from "vite-plugin-babel";
import { reactRouter } from "@react-router/dev/vite";

const ReactCompilerConfig = { /* ... */ };

export default defineConfig({
  plugins: [
    reactRouter(),
    babel({
      filter: /\.[jt]sx?$/,
      babelConfig: {
        presets: ["@babel/preset-typescript"], // if you use TypeScript
        plugins: [
          ["babel-plugin-react-compiler", ReactCompilerConfig],
        ],
      },
    }),
  ],
});

Webpack

コミュニティ製の webpack ローダーがこちらで利用できます。

Expo

Expo アプリで React Compiler を有効にして使用する方法については、Expo のドキュメントを参照してください。

Metro (React Native)

React Native は Metro 経由で Babel を使用するため、インストール手順については Babel での使用セクションを参照してください。

Rspack

Rspack アプリで React Compiler を有効にして使用する方法については、Rspack のドキュメントを参照してください。

Rsbuild

Rsbuild アプリで React Compiler を有効にして使用する方法については、Rsbuild のドキュメントを参照してください。

ESLint 統合

React Compiler には、最適化できないコードを特定するのに役立つ ESLint ルールが含まれています。ESLint ルールがエラーを報告する場合、コンパイラによるそのコンポーネントやフックの最適化がスキップされるという意味です。これは安全です。コンパイラはコードベースの他の部分の最適化を続けるので、すべての違反をすぐに修正する必要はありません。自分のペースで対処し、最適化されるコンポーネントの数を徐々に増やしていってください。

ESLint プラグインをインストールします。

eslint-plugin-react-hooks をまだ設定していない場合は、readme のインストール手順に従ってください。コンパイラのルールは recommended-latest プリセットで利用できます。

ESLint ルールは以下を行います。

• React のルールの違反の特定
• 最適化できないコンポーネントの表示
• 問題の修正に役立つエラーメッセージの提供

セットアップの確認

インストール後、React Compiler が正常に動作していることを確認します。

React DevTools による確認

React Compiler によって最適化されたコンポーネントは、React DevTools で “Memo ✨” バッジが表示されます。

1. React Developer Tools ブラウザ拡張機能をインストール
2. 開発モードでアプリを開く
3. React DevTools を開く
4. コンポーネント名の横にある ✨ 絵文字を探す

コンパイラが動作している場合

• コンポーネントは React DevTools で “Memo ✨” バッジを表示
• 高コストな計算が自動的にメモ化される
• 手動の useMemo は不要

ビルド出力の確認

また、ビルド出力を確認することでもコンパイラが動作していることを確認できます。コンパイルされたコードには、コンパイラが自動的に追加する自動メモ化ロジックが含まれています。

import { c as _c } from "react/compiler-runtime";
export default function MyApp() {
  const $ = _c(1);
  let t0;
  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
    t0 = <div>Hello World</div>;
    $[0] = t0;
  } else {
    t0 = $[0];
  }
  return t0;
}

トラブルシューティング

特定のコンポーネントの除外

コンポーネントがコンパイル後に問題を引き起こしている場合、"use no memo" ディレクティブを使用して一時的に除外できます。

function ProblematicComponent() {
  "use no memo";
  // Component code here
}

これにより、コンパイラはこの特定のコンポーネントの最適化をスキップします。根本的な問題を修正し、解決したらディレクティブを削除してください。

トラブルシューティングの詳細については、デバッグガイドを参照してください。

次のステップ

React Compiler がインストールされたので、以下について詳しく学びましょう。

• React 17 と 18 の React バージョン互換性
• コンパイラをカスタマイズする設定オプション
• 既存のコードベースでの段階的な導入戦略
• 問題のトラブルシューティングのためのデバッグテクニック
• React ライブラリをコンパイルするためのライブラリコンパイルガイド