いつ読むか?
- Suspenseやトランジションを使ったUI設計を検討するとき、この本を参照する。
読書メモ
Suspense
- Suspenseとは: 非同期処理(データ取得など)の完了を待つ間、フォールバックUIを表示するReactの標準機構
- 従来の
isLoading フラグによる条件分岐を不要にし、宣言的に非同期状態を扱える
- 関連章: 第3章「Suspenseの基本」、第4章「Suspenseとjotaiを組み合わせる」、第5章「AbortSignalを使って非同期処理の中断に対応する」
トランジション
- トランジションとは: 状態更新の優先度を下げ、UIの応答性を保つ仕組み(
useTransition, startTransition)
isPending で遷移中かどうかを判定し、ローディング表示などに活用
- 世界の分岐: トランジション中は新旧の状態が並行して存在し、新しい状態の準備が完了するまで古いUIを維持
- オプトアウト:
useDeferredValue を使い、特定の値だけトランジションの影響から除外できる
- 関連章: 第7章「トランジションの基本」、第8章「トランジションと”世界の分岐”」、第9章「トランジションのオプトアウト」