React Hooks 全19種の解説とサンプル
12. UseSyncExternalStore
概要
外部ストアと同期するためのフック
利用シーン: ブラウザAPIから画面サイズを取得、グローバルストアのデータ管理
基本的な使い方
useSyncExternalStore を使うと、外部の状態管理ライブラリ(Redux など)と同期を取れる。
Reduxなどを利用しないとなかなか使う機会は少ないが、 ブラウザAPIを使って画面サイズを取得することなどには利用されることがある。
状態管理を同期する例
目次
- はじめに
- 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