React Hooks 全19種の解説とサンプル
09. UseTransition
概要
優先度の低い状態更新を遅延させ、UIをスムーズにするフック
利用シーン:重い計算処理中のスムーズなUI更新。ページネーションの切り替えや検索処理、タブの切り替え
基本的な使い方
useTransition を使うと、優先度の低い状態更新をスケジュールできる。
処理に時間がかかる検索などは、検索している途中ユーザーが操作しても画面が反応しなくなってしまいユーザー体験が落ちてしまうので、
検索処理の優先度をuseTransitionで落とすことでUXを向上できる。
目次
- はじめに
- 01. useState
- 02. useEffect
- 03. useReducer
- 04. useContext
- 05. useRef
- 06. useMemo
- 07. useCallback
- 08. useLayoutEffect
- 09. useTransition
- 10. useDeferredValue
- 11. useId
- 12. useSyncExternalStore
- 13. useDebugValue
- 14. useImperativeHandle
- 15. useInsertionEffect
- 16. useActionStateNew
- 17. useOptimisticNew
- 18. useFormStatusNew
- 19. useNew