Logo

React19 Hook Study

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

09. UseTransition

概要


優先度の低い状態更新を遅延させ、UIをスムーズにするフック

利用シーン:重い計算処理中のスムーズなUI更新。ページネーションの切り替えや検索処理、タブの切り替え

基本的な使い方


useTransition を使うと、優先度の低い状態更新をスケジュールできる。
処理に時間がかかる検索などは、検索している途中ユーザーが操作しても画面が反応しなくなってしまいユーザー体験が落ちてしまうので、
検索処理の優先度をuseTransitionで落とすことでUXを向上できる。