React useDeferredValue — 遅延検索とリストフィルタリング
useDeferredValueを使って、高コストなリストフィルタリング中も検索入力をレスポンシブに保つ方法。デバウンスとの比較、古いコンテンツの表示、React.memoとの統合を網羅。
Transition Hooks
詳細な説明
useDeferredValueによる遅延更新
useDeferredValueは、緊急の更新時に遅れて追従する値の遅延バージョンを返します。入力をレスポンシブに保ちながら、高コストな子レンダリングをバックグラウンドで処理します。
デバウンスとの違い
| 側面 | useDeferredValue | デバウンス |
|---|---|---|
| 更新 | React管理、中断可能 | タイマーベース、固定遅延 |
| 古さのインジケーター | 組み込み（値の比較） | 手動実装 |
| Suspenseとの連携 | あり | 特別な統合なし |
| デバイス適応 | あり（速いデバイスでは速い） | どこでも同じ遅延 |
React.memoとの組み合わせ
useDeferredValueは、高コストな子コンポーネントがReact.memoでラップされている場合に最も効果的です。これにより、遅延値が実際に変更されたときのみ子が再レンダリングされます。
初期値（React 19）
React 19では、最初のレンダリング時の初期値としてオプションの第2引数が追加されました：
const deferredQuery = useDeferredValue(query, ""); // 初期値: ""
ユースケース
高コストなリストレンダリングを伴う入力検索、オートコンプリートドロップダウン、ダッシュボードのフィルタリング、結果の即座の表示よりも入力のレスポンシブ性が重要なシナリオにuseDeferredValueを使用します。