インストール

前提条件

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 設定でコンパイラルールを有効にします。

// .eslintrc.js
module.exports = {
  rules: {
    'react-hooks/react-compiler': 'error',
  },
};

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 ライブラリをコンパイルするための ライブラリコンパイルガイド