React Compiler 1.0 - 安定版の要点と段階的な導入

9分 で読める | 2026.04.09

公式ドキュメント
ReactJSWeb開発パフォーマンス

React Compiler 1.0公開日: 2025年10月7日

記事公開日: 2026年4月9日

最終確認日: 2026年7月25日

React Compiler 1.0は、ReactのcomponentとHookをbuild時に解析し、自動でmemoizationする最初の安定版です。

この記事の前半は1.0公開時の記録、後半は2026年時点の導入方法です。 frameworkの設定は更新されるため、利用中のversionに対応する公式手順も確認してください。

1.0で安定版になったもの

React Compilerは、renderに使われる値とfunctionの依存関係を解析し、必要な箇所へmemoizationを適用します。 開発者は最適化のためだけに、すべての値を手動で包む必要がなくなります。

React Compilerがビルド時に元のコードを解析・変換し、計算結果の再利用を組み込んだコードを作る概念図。効果は実際の操作で確認する

type Product = {
  id: string;
  name: string;
  available: boolean;
};

export function ProductList({ products }: { products: Product[] }) {
  const availableProducts = products.filter((product) => product.available);

  return (
    <ul>
      {availableProducts.map((product) => (
        <li key={product.id}>{product.name}</li>
      ))}
    </ul>
  );
}

このような通常のcomponentを、Compilerがデータフローに基づいて最適化します。 ただし、Compilerを入れればすべての再renderが消えるわけではありません。

Rules of Reactを診断に利用

Compilerは、componentとHookが次の原則を守ることを前提に解析します。

  • renderを純粋に保つ
  • propsとstateを直接変更しない
  • Hookをcomponentまたはcustom Hookのtop levelで呼ぶ
  • render中にrefを不正に読み書きしない

現在のlint pluginは、Compilerが検出した問題も表示します。 対応できない構文を見つけた場合、CompilerはそのcomponentやHookの最適化をskipし、他の安全な箇所のcompileを続けられます。

lintの指摘を確認する価値はありますが、全警告を一度に消さなければ試せないわけではありません。

ReactとReact Native

1.0はReactとReact Nativeの両方を対象に公開されました。 新規projectでは、Expo、Vite、Next.jsの作成toolからCompilerを選べる構成も案内されています。

React 17または18を対象にする場合は、react-compiler-runtimeとCompilerのtarget設定が必要です。 Reactのversionだけでなく、build toolとlibraryの組み合わせもtestします。

lint pluginはReact Hooksへ統合

1.0公開時に、Compilerのlint ruleはeslint-plugin-react-hooksへ統合されました。 以前の独立したCompiler用lint pluginを前提にした設定は更新が必要です。

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

Flat Configでは、公式pluginのrecommended presetを利用できます。

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

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

Compiler本体をまだ導入していないprojectでも、このlint ruleを利用できます。 rules-of-hooksやexhaustive-depsに加え、immutability、purity、ref、manual memoizationの保持などを確認できます。

既存のmemoizationはすぐ消さない

新しく書くcodeでは、まずCompilerにmemoizationを任せ、必要な場合だけ手動で制御する方針を選べます。

一方、既存のuseMemo、useCallback、React.memoを検索置換で一括削除してはいけません。 React公式は、既存のmanual memoizationを残すか、十分にtestしてから削除するよう案内しています。

理由は、次のようなcodeが存在するためです。

  • memoized valueのidentityをEffectのdependencyとして利用している
  • child componentや外部libraryが参照の安定性に依存している
  • 手動指定がCompilerの出力へ影響している
  • performance以外の意図をcommentやtestが表している

preserve-manual-memoizationのlint指摘も確認し、削除候補ごとに挙動とProfilerを比較します。

2026年時点の導入手順

1. 現在の状態を測る

Compiler導入前に、遅い操作、render回数、主要なunit testとE2E testの結果を記録します。 測定対象がなければ、導入後の効果や回帰を判断できません。

2. lintだけ先に更新する

eslint-plugin-react-hooksを更新し、Compiler diagnosticsを確認します。 指摘の数だけで失敗と判断せず、Rules of React違反、非対応構文、library由来の問題に分類します。

3. Compilerをexact versionで追加する

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

--save-exactは、その時点で解決されたversionを固定します。 Compilerのmemoization方法は将来変わる可能性があるため、upgradeはtestと一緒に行います。

frameworkを使わないBabel構成では、pluginを追加します。

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

Vite、Next.js、Expoなどでは、上のBabel設定をそのまま転用せず、現在のframework公式手順を使ってください。 過去のexperimental flagを新しいversionへコピーしないようにします。

4. 小さな範囲から有効化する

既存projectでは、annotation modeやgatingなどの段階導入方法を検討できます。 最初は変更頻度が低く、testのある画面を選びます。

次を導入前後で比べます。

  • 表示内容とuser操作
  • Effectの実行回数
  • render回数とinteraction時間
  • error log
  • development buildとproduction build

Compilerの導入そのものをperformance改善とみなさず、Profilerと実際の操作で判断します。

5. 段階的に広げる

限定範囲で問題がなければ、対象を少しずつ増やします。 manual memoizationの整理はCompilerの展開と分け、別の小さな変更としてreviewします。

導入checklist

  • 利用中のReact、React Native、framework、build toolのversionを記録した
  • 公式installationで現在の設定方法を確認した
  • React 17または18ではruntimeとtargetを確認した
  • eslint-plugin-react-hooksを更新した
  • Compiler packageをexact versionで固定した
  • Rules of Reactの指摘を分類した
  • 既存manual memoizationを一括削除していない
  • unit test、E2E test、production buildで確認した
  • Profilerで導入前後を比較した
  • Compiler upgrade時にも同じ確認を行う

2026年時点の読み方

React Compiler 1.0は安定版ですが、すべてのappで同じ効果や互換性を保証するものではありません。 Compilerがskipした箇所、非対応library、build時間、生成code、実際の操作速度をprojectごとに確認します。

また、framework側の統合はCompiler本体とは別に更新されます。 この記事の固定設定より、利用中versionの公式documentationを優先してください。

参考リソース

おすすめ記事

← 一覧に戻る
PR
PR
PR
PR