Logo

React19 Hook Study

React Hooks 全19種の解説とサンプル

10. UseDeferredValue

概要


値の更新を遅延させ、入力遅延を防ぐフック

利用シーン:検索フィルタ、入力フォームの最適化
サードパーティのコンポーネントを使うなど、コードを直接制御できない場合に利用されることが多い

基本的な使い方


useDeferredValue を使うことで、入力のスムーズさを維持しつつ、非同期で更新できる。
サードパーティのコンポーネントが再レンダリングに時間がかかったとしても、遅延しているためUXがよくなります。