react-19

React 19.3 のフックと機能を網羅しています。レンダー中に Promise／コンテキストを読み取る `use()`、UI を即座に更新する `useOptimistic`、フォームのアクション状態を管理する `useActionState`、子コンポーネントから保留状態を取得する `useFormStatus`、リアクティブでないエフェクトコールバックのための `useEffectEvent`、状態を維持したまま UI を非表示／表示する `Activity` コンポーネント、`` と `addTransitionType` によるアニメーション、Fragment refs、ブラウザー専用レンダリングのための `use(browser())`（19.3 の新機能）、さらに React Compiler による自動メモ化（手動の `useMemo`／`useCallback` はほぼ不要になります）を扱います。

従来のすべてのフック（useState、useEffect、useLayoutEffect、useRef、useImperativeHandle、useMemo、useCallback、useId、useSyncExternalStore）と、React 18 から 19 への破壊的変更（forwardRef の代わりに ref をプロパティとして渡す、<Context.Provider> の代わりに <Context value={}> を使う）についても説明します。これは React のフックと機能に関する中核スキルです。グローバル状態については react-state、フォームについては react-forms、SOLID アーキテクチャのルールについては solid-react を参照してください。

React 19.3 のコア機能

エージェントのワークフロー（必須）

実装を始める前に、必ず 3 つのエージェントを並列で起動します。それぞれ name を指定して Agent を 1 回ずつ呼び出してください。

1. fuse-ai-pilot:explore-codebase - 既存の React パターンとコンポーネント構造を分析します
2. fuse-ai-pilot:research-expert - Context7／Exa を使って React 19.3 の最新ドキュメントを確認します
3. mcp__context7__query-docs - use()、useOptimistic、useActionState、Activity のパターンを確認します

実装後、検証のために fuse-ai-pilot:sniper を実行します。

---

React 19.3 の新機能

19.3 で安定版となりました（react/react-dom 19.3.0、2026-09-09。@types/react 19.3 には TypeScript ≥ 5.6 が必要です）。

API	目的	ガイド
<ViewTransition>	ブラウザーの View Transition API を使って、表示／終了／更新／共有をアニメーション化します	references/suspense-patterns.md
addTransitionType(type)	別のアニメーションを選択できるよう、Transition にタグを付けます	references/suspense-patterns.md
<Fragment ref>	ラッパーの <div> を使わずに FragmentInstance（イベント、フォーカス、オブザーバー）を利用できます	references/ref-as-prop.md
use(browser(reason?)) (react-dom)	ブラウザー専用レンダリング。サーバーではサスペンドし、HTML では Suspense のフォールバックを表示します	references/new-hooks.md

動作の変更：Transition が相互にエンタイトルしなくなりました。StrictMode ではハイドレーション中にエフェクトが 2 回呼び出されます。use() の条件付きブロック解除時に DEV 警告が表示されます → references/migration-18-19.md。

RSC のセキュリティ： react-server-dom-* は 19.2.4 以上が必要です（CVE-2025-55182 の RCE と、その後に発見された DoS の CVE に対応）。19.2.7 以上または 19.3.0 を推奨します。

新しいフック（19.0～19.2）

フック	目的	ガイド
use()	レンダー中に Promise／コンテキストを読み取ります	references/new-hooks.md
useOptimistic	楽観的 UI 更新	references/new-hooks.md
useActionState	フォームのアクション状態を管理します	references/new-hooks.md
useFormStatus	フォームの保留状態（子コンポーネント）	references/new-hooks.md
useEffectEvent	エフェクト内でリアクティブでないコールバックを使います	references/new-hooks.md

→ 詳しい使い方については references/new-hooks.md を参照してください。

---

従来のフック（React 18 以降）

State フック

フック	目的	ガイド
useState	コンポーネントのローカル状態	references/use-state.md

→ グローバル状態については react-state スキルを参照してください。

Effect フック

フック	目的	ガイド
useEffect	描画後の副作用	references/use-effect.md
useLayoutEffect	描画前に DOM を同期します	references/use-layout-effect.md

Ref フック

フック	目的	ガイド
useRef	DOM へのアクセス、変更可能な値	references/use-ref.md
useImperativeHandle	ref API をカスタマイズします	references/use-imperative-handle.md

パフォーマンス関連のフック（Compiler 使用時はまれ）

フック	目的	ガイド
useMemo	コストの高い値をメモ化する	references/use-memo.md
useCallback	関数をメモ化する	references/use-callback.md

→ React Compiler がほとんどのメモ化を自動的に処理します

その他のフック

フック	目的	ガイド
useId	アクセシビリティのための一意な ID	references/use-id.md
useSyncExternalStore	外部ストアのサブスクリプション	references/use-sync-external-store.md

カスタムフック

→ パターンについては references/custom-hooks-patterns.md を参照してください → 実装については references/templates/custom-hooks.md を参照してください

---

Activity コンポーネント（19.2 以降で安定）

状態を維持したままコンポーネントを表示／非表示にします：

<Activity mode={isActive ? 'visible' : 'hidden'}>
  <TabContent />
</Activity>

→ パターンについては references/activity-component.md を参照してください

React Compiler（1.0 安定版、2025 年 10 月 — React 17 以降）

自動メモ化により、useMemo/useCallback はほとんど不要になります：

• ビルド時の最適化
• ほとんどの場合、手動でのメモ化は不要です
• インタラクションが 2.5 倍高速になったとの報告があります

→ 詳細については references/react-compiler.md を参照してください

---

クイックリファレンス

use() フック

// Read promise in render (with Suspense)
const data = use(dataPromise)

// Read context conditionally (unique to use())
if (condition) {
  const theme = use(ThemeContext)
}

→ references/templates/use-promise.md を参照してください

useOptimistic

const [optimisticValue, setOptimistic] = useOptimistic(actualValue)
// Update UI immediately, server updates later

→ references/templates/optimistic-update.md を参照してください

useActionState

const [state, action, isPending] = useActionState(asyncFn, initialState)

→ references/templates/action-form.md を参照してください

useEffectEvent（19.2 以降で安定）

const onEvent = useEffectEvent(() => {
  // Always has fresh props/state, doesn't trigger re-run
})

useEffect(() => {
  connection.on('event', onEvent)
}, []) // No need to add onEvent to deps

→ references/new-hooks.md を参照してください

---

18 からの破壊的変更

変更	移行方法
ref はプロパティです	forwardRef のラッパーを削除します
Context はプロバイダーです	<Context value={}> を直接使用します
useFormStatus	react-dom からインポートします

→ references/migration-18-19.md を参照してください

---

ベストプラクティス

1. データ取得：useEffect ではなく、use() + Suspense を使用します
2. フォーム：Actions + useActionState を使用します
3. 楽観的 UI：即時のフィードバックには useOptimistic を使用します
4. タブ／モーダル：状態を維持するには <Activity> を使用します
5. エフェクトイベント：非リアクティブなコールバックには useEffectEvent を使用します
6. メモ化：React Compiler に任せます

---

テンプレート

React 19 のパターン

テンプレート	用途
templates/action-form.md	useActionState を使用したフォーム
templates/optimistic-update.md	useOptimistic のパターン
templates/activity-tabs.md	Activity コンポーネントのタブ
templates/use-promise.md	promise で use() を使用

従来のフックパターン

テンプレート	用途
templates/state-patterns.md	useState のパターン
templates/effect-patterns.md	useEffect のパターン
templates/ref-patterns.md	useRef のパターン
templates/custom-hooks.md	カスタムフックの実装
templates/external-store.md	useSyncExternalStore のパターン

パフォーマンスパターン

テンプレート	用途
templates/virtual-list.md	大規模なリスト向けの TanStack Virtual
templates/lazy-components.md	コード分割と遅延読み込み
templates/profiling-devtools.md	React DevTools Profiler

---

パフォーマンス

仮想化

大規模なリスト（100 件以上）では、表示されている項目だけをレンダリングします。 → references/virtualization.md を参照してください

遅延読み込み

バンドルサイズを小さくするため、ルートやサイズの大きいコンポーネントをコード分割します。 → references/lazy-loading.md を参照してください

プロファイリング

DevTools Profiler でレンダリングのパフォーマンスを測定します。 → references/profiling.md を参照してください

注： React Compiler（1.0 以降）では、useMemo/useCallback の手動最適化はほとんど不要です。まずプロファイリングを行い、最適化が必要かどうかを確認してください。

---

使用禁止（古いパターン）

• ❌ データ取得に useEffect を使用 → use() + Suspense を使用します
• ❌ forwardRef を使用 → ref をプロパティとして使用します
• ❌ <Context.Provider> を使用 → <Context value={}> を使用します
• ❌ あらゆる箇所で手動で useMemo/useCallback を使用 → Compiler に任せます
• ❌ 状態を維持するために条件付きレンダリングを使用 → <Activity> を使用します