第7章: React 19の全貌 — Actions・Compiler・そしてその先へ | React Deep Dive

React 19.0の新機能

2024年12月に正式リリースされたReact 19は、フォーム処理、データ読み取り、メタデータ管理を根本から刷新するメジャーバージョンです。 React 18のConcurrent Renderingを土台に、開発者体験を大きく前進させる新APIが多数導入されました。

Actions — 非同期トランジションとフォームアクション

Actionsは、フォーム送信や非同期処理における状態管理を劇的に簡素化する仕組みです。従来、フォーム送信ではpending、error、optimistic update、sequential requestsをすべて手動で管理する必要がありました。 React 19では、トランジション内で非同期関数を使用すると、Reactが自動的にpending状態を管理します。

// React 19: useTransition + 非同期関数
function UpdateName() {
  const [name, setName] = useState('');
  const [error, setError] = useState(null);
  const [isPending, startTransition] = useTransition();

  const handleSubmit = () => {
    startTransition(async () => {
      const error = await updateName(name);
      if (error) {
        setError(error);
        return;
      }
      redirect('/profile');
    });
  };

  return (
    <div>
      <input value={name} onChange={(e) => setName(e.target.value)} />
      <button onClick={handleSubmit} disabled={isPending}>
        更新
      </button>
      {error && <p>{error}</p>}
    </div>
  );
}

さらに、<form>要素のaction属性に関数を直接渡せるようになりました。 useActionStateフックと組み合わせることで、フォームの状態管理がシンプルになります。 useOptimisticフックを使えば、サーバー応答を待たずに楽観的UI更新も実現できます。

`use` hook — 条件分岐の中でも使える新しいプリミティブ

useは、Reactの既存Hooks規則を破る初めてのhookです。 条件分岐やループの中でも呼び出せるという画期的な特徴を持ちます。

// Promiseの読み取り — Suspenseと連携
function Comments({ commentsPromise }) {
  const comments = use(commentsPromise);
  return comments.map(c => <p key={c.id}>{c.text}</p>);
}

// Contextの読み取り — 条件分岐OK
function ThemeText({ isEnabled }) {
  if (isEnabled) {
    const theme = use(ThemeContext);
    return <p style={{ color: theme.color }}>テーマ適用</p>;
  }
  return <p>テーマ無効</p>;
}

Promiseをuseで読み取ると、Promiseが解決するまでコンポーネントがサスペンドします。これにより、Suspenseベースの宣言的データフェッチが自然に実現できます。

ref改善 — forwardRef不要化とクリーンアップ関数

React 19では、関数コンポーネントがpropsとしてrefを直接受け取れるようになりました。 forwardRefでラップする必要はもうありません。また、refコールバックからクリーンアップ関数を返すことが可能になり、要素がDOMから削除された際のリソース解放が明示的に記述できます。

// forwardRefが不要に
function MyInput({ placeholder, ref }) {
  return <input placeholder={placeholder} ref={ref} />;
}

// refクリーンアップ関数
<input ref={(el) => {
  // マウント時: 観測開始
  const observer = new IntersectionObserver(callback);
  observer.observe(el);

  // クリーンアップ: アンマウント時に自動呼出
  return () => observer.disconnect();
}} />

Document Metadata・Stylesheet・Preloading APIs

React 19では、<title>、<meta>、<link>タグをコンポーネント内に直接記述でき、Reactが自動的に<head>へ巻き上げます。スタイルシートにはprecedence属性を指定することで、読み込み順序を宣言的に制御可能です。さらにpreload、preconnect、prefetchDNS、preinitといったPreloading APIsがReact DOMに追加され、リソースの先読みをコンポーネントレベルで制御できるようになりました。

その他の改善

Custom Elementsの対応が改善され、Web ComponentsとReactの共存が容易になりました。また、Context.Providerが不要になり、<Context>として直接レンダリングできるようになっています。

機能	React 18以前	React 19
フォーム状態管理	手動でpending/error管理	useActionState + Actions
Promise読み取り	useEffect + useState	`use(promise)` + Suspense
ref転送	`forwardRef`が必須	propsとして直接受け取り
メタデータ管理	react-helmet等の外部ライブラリ	コンポーネント内に直接記述
Context Provider	`<Ctx.Provider>`	`<Ctx>`で直接レンダリング

React Compiler v1.0

2025年10月にv1.0がリリースされたReact Compilerは、Reactのパフォーマンス最適化を根本から変革する技術です。これまで開発者が手動で行っていたuseMemo、useCallback、React.memoによる最適化を、コンパイラが自動的に実行します。

graph LR
  A[ソースコード\nJSX/TSX] --> B[Babel AST\n構文解析]
  B --> C[HIR\n高レベル中間表現]
  C --> D[CFG\n制御フローグラフ]
  D --> E[データフロー分析\nリアクティビティ推論]
  E --> F[最適化コード\n自動メモ化済み]

  style A fill:#3b82f6,stroke:#1d4ed8,color:#fff
  style B fill:#6366f1,stroke:#4f46e5,color:#fff
  style C fill:#8b5cf6,stroke:#7c3aed,color:#fff
  style D fill:#a855f7,stroke:#9333ea,color:#fff
  style E fill:#c084fc,stroke:#a855f7,color:#fff
  style F fill:#22c55e,stroke:#16a34a,color:#fff

React Compilerのコンパイルパイプライン: ソースコードからBabel AST → HIR → CFGベースのデータフロー分析を経て、自動メモ化されたコードを出力

技術的には、ソースコードをBabel ASTに解析した後、独自のHIR（High-level Intermediate Representation）に変換し、 CFG（Control Flow Graph）ベースのデータフロー分析によってどの値がリアクティブで、どこでメモ化すべきかを推論します。 JavaScriptのルールとReactのルール（Hooks規則、副作用の冪等性など）の両方を考慮した高度な分析です。

Metaでの実績は目覚ましく、Quest Storeでは初期ロード時間が12%改善、特定操作で最大2.5倍の高速化が報告されています。 Instagram、Facebook、Threadsなど、Meta全体での導入が進んでいます。

React 19.1/19.2の進化

React 19.1 — デバッグとIDの改善

2025年3月リリースの19.1では、Owner Stackが導入されました。従来のComponent Stackが「どこでレンダリングされているか」を示すのに対し、Owner Stackは「どのコンポーネントがこのコンポーネントをJSXとして作成したか」を追跡します。これにより、エラー発生時のデバッグが格段に効率化されました。また、useIdが生成するID形式が変更され、CSSセレクタとの互換性が向上しています。

React 19.2 — Activityとパフォーマンス計測

2025年6月リリースの19.2は、実験的機能が多数追加された意欲的なリリースです。

<Activity />（旧Offscreen）は、画面外のコンポーネントの状態を保持しつつ、レンダリング優先度を制御する仕組みです。 mode="hidden"で非表示にしても状態が破棄されないため、タブ切り替えやルート遷移で即座に復帰できます。

// Activity: 非表示でも状態を保持
<Activity mode={isVisible ? 'visible' : 'hidden'}>
  <HeavyComponent />
</Activity>

useEffectEventは、エフェクト内で使用するイベントハンドラを依存配列から除外できるhookです。 Performance TracksはReact DevToolsのProfilerに実験的に追加された、Concurrent Renderingの優先度レーンを視覚化する機能です。 PPR（Partial Pre-Rendering）のサポートも進み、Server Componentsとの統合が深まっています。

Canaryチャンネルの先行機能

<ViewTransition />は、ブラウザのView Transitions APIをReactのレンダリングサイクルに統合するコンポーネントです。ページ遷移やレイアウト変更時にスムーズなアニメーションを宣言的に記述できます。 Fragment Refsは、Fragmentに対してrefを付与し、内包する複数のDOM要素への参照を取得できる機能です。

セキュリティ脆弱性 — React2Shell

「React2Shell」と名付けられたこの脆弱性群は、React Server Functionsの処理に起因する4つのCVEから構成されます。

CVE	深刻度	種別	影響
CVE-2025-55182	CVSS 10.0（Critical）	RCE（リモートコード実行）	Server Functionsを通じてサーバー上で任意コード実行
CVE-2025-55184	High	DoS	細工されたリクエストによるサービス停止
CVE-2025-67779	High	DoS	別経路でのサービス停止攻撃
CVE-2025-55183	Medium	情報漏洩	サーバー側のソースコードがクライアントに露出

最も深刻なCVE-2025-55182は、Server Functions（"use server"）の入力検証の不備を突き、 リモートからサーバー上で任意のコードを実行できるRCE脆弱性です。攻撃者はシェルコマンドの実行、データベースへのアクセス、環境変数の窃取などが可能でした。

この事件は、Server Components/Server Actionsという新しいパラダイムが、 従来のクライアントサイドReactにはなかったサーバーサイド特有の攻撃面を導入したことを浮き彫りにしました。 Server Functionsへの入力は常にバリデーションし、"use server"のある関数では引数を信頼しないという原則が極めて重要です。

理解度チェック

問題 0 / 40%

React 19の `use` hookの特徴として正しいものはどれですか？

キーボード: 1〜4 で選択、Enter で回答