React 19.2 Activityコンポーネント：Offscreen描画最適化

ウェブアプリケーションでタブ（Tab）切り替え、ダッシュボードウィジェット、マルチステップフォームを実装する際、フロントエンドエンジニアは長年にわたり厳しいトレードオフに悩まされてきました。{activeTab === 'profile' && <ProfileTab />}のような**条件付き描画（Conditional Rendering）**を使用すると、タブを切り替えるたびにコンポーネント内部のStateとDOMが破壊され、再びタブを開く際に初期描画のチラつき（Jank）やスクロール位置の損失が発生していました。

逆にclassName={activeTab === 'profile' ? 'block' : 'hidden'}などのスタイルベースでCSS display: none処理を行うと、画面に見えていないバックグラウンドタブでもuseEffectタイマー、WebSocket接続の購読、チャートアニメーションの描画が実行され続け、CPU使用率とメモリが継続的に無駄遣いされる副作用が生じました。

この二律背反の限界を完全に突破するために、React 19.2で正式に安定化（GA）された新規APIが<Activity />コンポーネントです。<Activity mode="hidden">はコンポーネントのDOMノードとReact Stateをメモリ上にそのまま維持しつつも、useEffectリソースの解除およびバックグラウンドスケジューリングを自動実行し、0msの即時画面復元とコンポーネントリソースの削減を同時に達成します。

この記事では、React 19.2の<Activity />コンポーネントによるOffscreen描画メカニズム、View Transitions APIおよびReact Compilerとの統合実践パターン、そしてタブ切り替えのレイテンシ180ms → 0ms削減ベンチマークを詳細にガイドします。

要約

• 状態保持 + Effect整理の結合: <Activity mode="hidden">はフォーム入力値・スクロール位置・React Stateを保持しながらも、useEffectの購読やアニメーションフレームのスケジューリングを安全に停止（クリーンアップ）します。
• 低優先度（Low-Priority）描画: 非アクティブ（hidden）状態であるコンポーネントへの状態更新リクエストは、ReactのConcurrentレンダラーが最下位の優先度としてスケジューリングし、現在表示されている画面のフレームドロップを防ぎます。
• タブ切り替え0msの達成: コンポーネントの再マウントプロセスなしで、すでにメモリ上に構築されたDOMツリーを即座に可視化し、タブ切り替えの遅延を0msレベルに最小化します。
• React Compiler完全対応: React 19の自動メモ化コンパイラと完全に結合し、不要な子コンポーネントの再描画カスケードを根本から遮断します。

1. 描画方式3種の比較：条件付き vs CSS display:none vs <Activity>

React 19.2公式リリースノートおよび2026年のフロントエンドアーキテクチャ基準による3つの描画方式の比較です。

[条件付き描画]
  タブ変更 ──► コンポーネント破棄 (State消失 ❌) ──► タブ再進入 ──► 全体再マウント (遅い 🐌)

[CSS display: none]
  タブ変更 ──► DOM/State保持 ──► しかしuseEffectタイマー/WebSocketが動作継続 (リソース無駄遣い 💸)

[React 19.2 <Activity mode="hidden">] ⭕️
  タブ変更 ──► DOM/State保持 ──► useEffectを安全に解除 ──► タブ再進入 ──► 0ms復元 (超高速 ⚡️)

2. <Activity />コンポーネントの基本動作原理とライフサイクル

<Activity>はmodeプロパティ（'visible' | 'hidden'）に応じて、内部にラップされたサブコンポーネントツリーのライフサイクルとイベントハンドリングを制御します。

// app/components/TabContainer.tsx
import { useState, Activity } from 'react';
import { AnalyticsDashboard } from './AnalyticsDashboard';
import { UserProfileForm } from './UserProfileForm';

export function TabContainer() {
  const [currentTab, setCurrentTab] = useState<'analytics' | 'profile'>('analytics');

  return (
    <div className="w-full max-w-4xl mx-auto p-6">
      {/* タブナビゲーションボタン */}
      <nav className="flex gap-4 mb-6 border-b pb-3">
        <button
          onClick={() => setCurrentTab('analytics')}
          className={`px-4 py-2 font-medium rounded-lg transition-colors ${
            currentTab === 'analytics' ? 'bg-indigo-600 text-white' : 'bg-slate-100 text-slate-700'
          }`}
        >
          リアルタイム分析ダッシュボード
        </button>
        <button
          onClick={() => setCurrentTab('profile')}
          className={`px-4 py-2 font-medium rounded-lg transition-colors ${
            currentTab === 'profile' ? 'bg-indigo-600 text-white' : 'bg-slate-100 text-slate-700'
          }`}
        >
          ユーザープロファイル設定
        </button>
      </nav>

      {/* 1. 分析ダッシュボード: mode='hidden'進入時にWebSocket購読停止、タブに戻れば0ms即時復元 */}
      <Activity mode={currentTab === 'analytics' ? 'visible' : 'hidden'}>
        <AnalyticsDashboard />
      </Activity>

      {/* 2. プロファイルフォーム: 入力中のテキストとフォーム検証状態がタブ切り替え中も破棄されない */}
      <Activity mode={currentTab === 'profile' ? 'visible' : 'hidden'}>
        <UserProfileForm />
      </Activity>
    </div>
  );
}

サブコンポーネントのライフサイクル動作 (AnalyticsDashboard.tsx)

// app/components/AnalyticsDashboard.tsx
import { useEffect, useState } from 'react';

export function AnalyticsDashboard() {
  const [chartData, setChartData] = useState<number[]>([]);

  // <Activity mode="hidden">に切り替わった瞬間、useEffectのクリーンアップ関数が呼び出され
  // タイマーやWebSocketの購読が自動的に解除されます。
  // 再びmode="visible"になると、useEffectが再実行されて購読を再開します。
  useEffect(() => {
    console.log('[AnalyticsDashboard] Effect開始: WebSocket接続');
    const ws = new WebSocket('wss://api.effidev.dev/realtime-metrics');

    ws.onmessage = (event) => {
      const point = JSON.parse(event.data);
      setChartData((prev) => [...prev.slice(-19), point.value]);
    };

    return () => {
      console.log('[AnalyticsDashboard] Effect解除: WebSocket切断 (hidden進入)');
      ws.close();
    };
  }, []);

  return (
    <div className="p-6 border rounded-2xl bg-slate-900 text-white shadow-xl">
      <h3 className="text-xl font-bold mb-4">リアルタイムサーバー通信メトリクス</h3>
      <div className="h-40 flex items-end gap-2">
        {chartData.map((val, idx) => (
          <div
            key={idx}
            style={{ height: `${val}%` }}
            className="flex-1 bg-gradient-to-t from-indigo-500 to-fuchsia-500 rounded-t"
          />
        ))}
      </div>
    </div>
  );
}

3. View Transitions API + React Compiler統合パターン

React 19.2の<Activity>はネイティブブラウザのView Transitions APIと連携する際、画面切り替えアニメーションを極めてスムーズにします。Tailwind CSS v4 OxideエンジンおよびAnchor Positioningガイドで扱ったモダンCSSアニメーションアーキテクチャと結合した例です。

// app/components/AnimatedTabs.tsx
import { useState, Activity, startTransition } from 'react';
import { HeavyDataGrid } from './HeavyDataGrid';

export function AnimatedTabs() {
  const [tab, setTab] = useState<'grid' | 'settings'>('grid');

  const handleTabChange = (nextTab: 'grid' | 'settings') => {
    // View Transitions APIとReact Concurrent Transitionを組み合わせる
    if (document.startViewTransition) {
      document.startViewTransition(() => {
        startTransition(() => {
          setTab(nextTab);
        });
      });
    } else {
      startTransition(() => {
        setTab(nextTab);
      });
    }
  };

  return (
    <section className="space-y-6">
      <div className="flex gap-2">
        <button onClick={() => handleTabChange('grid')}>データグリッド</button>
        <button onClick={() => handleTabChange('settings')}>環境設定</button>
      </div>

      {/* Offscreen ActivityにView Transitionネームスペースを適用 */}
      <div className="view-transition-container">
        <Activity mode={tab === 'grid' ? 'visible' : 'hidden'}>
          <HeavyDataGrid />
        </Activity>

        <Activity mode={tab === 'settings' ? 'visible' : 'hidden'}>
          <div className="p-6 border rounded-xl">環境設定パネル</div>
        </Activity>
      </div>
    </section>
  );
}

/* app/styles/view-transitions.css */
/* Activity可視性変更時にスムーズなフェードイン/アウトトランジションを適用 */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 200ms;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

Vite 8 & Rolldown 1.0導入ガイドで扱ったバンドラー最適化環境において、React 19の自動メモ化コンパイラ（React Compiler）がこのコードの描画ツリーを最適化し、hidden処理された<Activity>内部コンポーネントが不要に再描画される現象を完全に遮断します。

4. 実測ベンチマークおよび性能比較

1,000件のデータ行を持つ重いデータテーブルおよびチャートタブインターフェース環境で測定した実測レイテンシおよびCPU/メモリ指標です。

5. エンタープライズベストプラクティスおよび導入チェックリスト

よくある質問

<Activity>コンポーネントは従来のOffscreen実験的APIと同じものですか？

はい。React 18時代にUnstable_Offscreenという名前で実験されていた内部アーキテクチャが結実し、React 19.2で正式名称を<Activity>として確定し, 本番環境で使用できるようにGA（General Availability）承認されました。

<Activity mode="hidden">の時、DOMノードはどこに残りますか？

DOMノードは実際のDocumentツリー上にそのまま存在しますが、ブラウザのレイアウト計算を遮断するためにhiddenスタイル属性に類似した低レベルのSuspenseバウンダリ属性が自動的に付与されます。そのため、可視的な描画計算（Paint/Reflow）コストは発生しません。

Next.js App RouterやRemixでも使用できますか？

はい。React 19.2をサポートするすべてのフレームワークのクライアントコンポーネント（"use client"）領域で、即座に<Activity>コンポーネントをインポートして使用できます。

バックグラウンドタブで発生するState変更はどのように処理されますか？

<Activity mode="hidden">状態で状態変更関数（setState）が呼び出されると、ReactのConcurrent렌다ラーが該当タスクを最下位の優先度（Low-Priority）スケジューラクエリに入れます。現在画面に見えているメインビューのインタラクションがすべて終了した後に、安全にバックグラウンドで更新が処理されます。