React 19.2 の要点まとめ

React

Posted at 2025-10-03

概要

React 19.2 が公式にリリースされました（2025-10-01）。このマイナーバージョンは大きな概念の導入というより「実務で使いやすく・観測しやすくする」改善が中心で、レンダリングの可視化、Effect の扱い改善、Server Components 向けのキャッシュ制御などが含まれます。

TL;DR（短く）

リリース日: 2025-10-01（React 19.2）。
目立つ新機能: Activity コンポーネント、useEffectEvent フック、cacheSignal（RSC 向け）、React 用 Performance Tracks（DevTools）、部分事前レンダリングのための prerender / resume 系 API。
性格付け: 開発体験（DX）とパフォーマンス観測を向上させる「品質改善」リリース。

主要な新機能と実務での意味

1) `Activity` コンポーネント（表示中／非表示の振る舞いを切り替え）

Activity は子コンポーネントを「隠す（display: none）」と同時にその副作用をクリーンアップして、表示時には状態を復元できる境界です。ユーザーが見ていない画面や将来遷移先として事前に読み込んでおきたい部分を低コストで保持／準備する用途に向きます。

簡単なイメージ

import { Activity } from 'react';

function Page() {
  return (
    <div>
      <MainView />
      <Activity mode={isLikelyNext ? 'visible' : 'hidden'}>
        <PrefetchHeavyComponent />
      </Activity>
    </div>
  );
}

2) `useEffectEvent`（Effect とイベントロジックの分離）

Effect 内で生成していた「コールバック（イベント処理）」を useEffectEvent に切り出すことで、いわゆる stale-closure 問題をシンプルに扱えます。

import { useEffect, useEffectEvent } from 'react';

function ChatRoom({ roomId, theme }) {
  const onConnected = useEffectEvent(() => {
    showNotification('Connected', theme);
  });

  useEffect(() => {
    const conn = createConnection(roomId);
    conn.on('connected', () => onConnected());
    conn.connect();
    return () => conn.disconnect();
  }, [roomId]);
}

3) `cacheSignal`（Server Components 向けのキャッシュライフ管理）

cacheSignal() は React.cache() によるキャッシュの「寿命が終わる」ことを検知する AbortSignal を返します。

import { cache, cacheSignal } from 'react';

const cachedFetch = cache(async (url) => { /* ... */ });

async function MyRsc() {
  await cachedFetch(url, { signal: cacheSignal() });
}

4) Performance Tracks（Chrome DevTools での可視化）

React 19.2 は Chrome DevTools の Performance タイムラインにカスタムトラックを追加し、Scheduler 優先度・各コンポーネントのレンダリング時間などをより細かく観測できるようになりました。

5) 部分事前レンダリング（prerender / resume 系 API）

部分事前レンダリング（部分プリレンダリング）は、静的に配信できる「シェル部分」を先に CDN で配り、動的なサブツリーをサーバーのストリーミングや resume 機構で後から補うワークフローをサポートします。

互換性・移行で気をつける点

breaking な変更は少ないがツールチェーン依存があるため、アップグレード前に公式ノートを確認する。
useEffectEvent に合わせて eslint プラグインや lint ルールの更新を検討する。
Server Components 利用時は cacheSignal の挙動を理解して設計する。
DevTools の Performance Tracks を利用する場合は Chrome Canary などで確認。

実務でのおすすめ導入パターン

非クリティカルな画面で Activity を試す。
useEffectEvent は stale closure 問題のある箇所から置き換える。
RSC 利用時は cacheSignal を活用し不要処理を abort。
パフォーマンス観測を DevTools のトラックで実測。

参考リンク

所属会社（エンジニア積極採用中）

株式会社ONE WEDGE

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up