react-use-hooks

React-Use Hooks

このスキルは、React プロジェクトで react-use hooks を選択して実装するためのガイドです。要件に最適な react-use hook を対応付け、正しい使用パターンを適用します。また、実装を簡潔で保守しやすく、高パフォーマンスに保つため、独自コードよりも hook ベースの解決策を優先します。

適用する場合

• React でのユーザー開発を支援する際は、常にこのスキルを適用してください。
• 要件を実装できる react-use hook があるか、必ず最初に確認してください。
• 可読性、保守性、パフォーマンスを向上させるため、カスタムコードより react-use hooks を優先してください。
• 要件に最適な hook を対応付け、その hook の呼び出しルールに従ってください。
• 以下の hooks テーブルにある Invocation フィールドを参照してください。例：
  • AUTO：該当する場合は自動的に使用します。
  • EXTERNAL：必要な外部依存関係がすでにユーザーによってインストールされている場合にのみ使用してください。それ以外の場合は再検討し、本当に必要な場合に限り、インストールを依頼してください。
  • EXPLICIT_ONLY：ユーザーから明示的に依頼された場合にのみ使用してください。

  NOTE プロンプトまたは AGENTS.md に記載されたユーザーの指示によって、hook のデフォルトの Invocation ルールが上書きされる場合があります。

Hooks

以下に記載するすべての hooks は react-use ライブラリの一部です。各セクションでは、機能に基づいて hooks を分類しています。

重要：各 hook の項目には、短い Description と詳細な Reference が含まれています。hook を使用する際は、使用方法と型宣言の詳細について、必ず ./references にある対応するドキュメントを参照してください。

センサー

Hook	説明	呼び出し
createBreakpoint	laptopL: 1440、laptop: 1024、tablet: 768	AUTO
useBattery	バッテリーの状態を追跡する React センサーフックです。	AUTO
useGeolocation	ユーザーの地理的位置を追跡する React センサーフックです。このフックは[位置オプション](https	AUTO
useHash	ブラウザーのロケーションハッシュを追跡する React センサーフックです。	AUTO
useHover	要素にホバーしているかどうかを追跡する React UI センサーフックです。	AUTO
useHoverDirty	ref を使用してマウスのホバー状態を追跡します（useHover より直接的です）。	AUTO
useIdle	ページ上のユーザーがアイドル状態かどうかを追跡する React センサーフックです。	AUTO
useIntersection	対象要素と祖先要素との交差の変化を追跡する React センサーフックです。	AUTO
useKey	キーボードキーが押されたときに handler を実行する React UI センサーフックです。	AUTO
useKeyboardJs	「いつ〜したか」の検出など、複雑なキーの組み合わせを検出する React UI センサーフックです。	EXTERNAL
useKeyPress	ユーザーが特定のキーを押していることを検出する React UI センサーフックです。	AUTO
useKeyPressEvent	useKey と同様に、keydown および keyup コールバックを実行するフックです。	AUTO
useLocation	ブラウザーのロケーションを追跡する React センサーフックです。	AUTO
useLongPress	長押しの後にコールバックを実行する React センサーフックです。	AUTO
useMeasure	[Resize Observer API](https:// を使用して HTML 要素の寸法を追跡する React センサーフックです。	AUTO
useMedia	CSS メディアクエリの状態を追跡する React センサーフックです。	AUTO
useMediaDevices	接続されているハードウェアデバイスを追跡する React センサーフックです。	AUTO
useMotion	デバイスの加速度センサーを使用して動きを追跡する React センサーフックです。	AUTO
useMouse	マウス位置の変化に応じて再レンダリングする React センサーフックです。useMouse は単純に追跡します。	AUTO
useMouseHovered	座標範囲の制限やホバー中のみの追跡オプションを備えた、拡張マウストラッキングです。	AUTO
useMouseWheel	ウィンドウ内でのマウススクロールの deltaY を取得する React フックです。	AUTO
useNetworkState	ブラウザーのネットワーク接続状態を追跡します。	AUTO
useOrientation	ユーザーのデバイスの画面の向きを追跡する React センサーフックです。	AUTO
usePageLeave	マウスがページから離れたときにコールバックを実行する React センサーフックです。	AUTO
usePinchZoom	ポインターのタッチイベントの変化を追跡し、ピンチの差分値を検出する React センサーフックです。	AUTO
useScratch	マウスの「スクラブ」（または「スクラッチ」）状態を追跡する React センサーフックです。	AUTO
useScroll	DOM 要素内のスクロール位置が変化したときに再レンダリングする React センサーフックです。	AUTO
useScrollbarWidth	現在のブラウザーのスクロールバー幅を返すフックです。	AUTO
useScrolling	ユーザーがスクロール中かどうかを追跡する React センサーフックです。	AUTO
useSearchParam	ブラウザーのロケーションの検索パラメーターを追跡する React センサーフックです。	AUTO
useSize	HTML 要素のサイズを追跡する React センサーフックです。	AUTO
useStartTyping	ユーザーが入力を開始したときにコールバックを実行する React センサーフックです。〜に使用できます。	AUTO
useWindowScroll	ウィンドウのスクロール時に再レンダリングする React センサーフックです。	AUTO
useWindowSize	ブラウザーウィンドウの寸法を追跡する React センサーフックです。	AUTO

UI

Hook	説明	呼び出し
useAudio	<audio> 要素を作成し、その状態を追跡して再生コントロールを公開します。	AUTO
useClickAway	ユーザーが	AUTO
useCss	[CSS を動的に変更する][gen-5] React UI フックです。「仮想 CSS」のように機能します —	AUTO
useDrop	ファイルやリンクのドロップ、コピー＆ペースト時に動作します。	AUTO
useFullscreen	要素を全画面表示します。iOS での動画の全画面表示には、オプションでフォールバックを指定できます。	AUTO
useSlider	任意の HTML 要素にスライド動作を提供する React UI フックです。マウスとタッチの両方をサポートします	AUTO
useSpeech	指定した文字列を音声で読み上げる React UI フックです。	AUTO
useVibrate	[Vibration API]( を使用して、デバイスの振動ハードウェアで物理的なフィードバックを提供する React UI フックです	AUTO
useVideo	<video> 要素を作成し、その状態を追跡して再生コントロールを公開します。	AUTO

アニメーション

Hook	説明	呼び出し
useHarmonicIntervalFn	useInterval フックと同様ですが、すべてのエフェクトを同じ間隔で実行します	AUTO
useInterval	[Dan Abramov の overreacted.io の記事](https://overreacted.i に基づく宣言的なインターバルフック	AUTO
useRaf	各 requestAnimationFrame でコンポーネントを再レンダリングする、React のアニメーションフックです	AUTO
useSpring	時間の経過に応じて単一の数値を更新する React アニメーションフックです	EXTERNAL
useTimeout	指定したミリ秒数の経過後にコンポーネントを再レンダリングします。	AUTO
useTimeoutFn	指定したミリ秒数の経過後に指定した関数を呼び出します。	AUTO
useTween	数値を 0 から 1 の間でトゥイーンする React アニメーションフックです。	AUTO
useUpdate	コンポーネントを強制的に	AUTO

副作用

フック	説明	呼び出し方法
useAsync	async 関数、または値を返す関数を解決する React フック	AUTO
useAsyncFn	async 関数に対する状態とコールバックを返す React フック	AUTO
useAsyncRetry	追加の retry メソッドを備えた useAsync を使用して、非同期関数を簡単に再試行または更新します。	AUTO
useBeforeUnload	ユーザーがページを再読み込みまたは閉じようとしたときに、ブラウザーのアラートを表示する React の副作用フックです。	AUTO
useCookie	現在の cookie の値と、cookie を更新するコールバックを返す React フック	AUTO
useCopyToClipboard	テキストをユーザーのクリップボードにコピーします。	AUTO
useDebounce	前回の呼び出しから指定されたミリ秒数が経過した後に関数を呼び出す React フック	AUTO
useError	エラーを通知する関数を返す React の副作用フックです。	AUTO
useFavicon	ページのファビコンを設定する React の副作用フックです。	AUTO
useLocalStorage	単一の localStorage キーを管理する React の副作用フックです。	AUTO
useLockBodyScroll	body 要素のスクロールをロックする React の副作用フックです。モーダルやその他のオーバーレイに便利です。	AUTO
usePermission	ブラウザー API の権限状態を照会する React の副作用フックです。	AUTO
useRafLoop	親コンポーネントを再レンダリングせずに、指定された関数を RAF ループ内で呼び出すフックです。	AUTO
useSessionStorage	単一の sessionStorage キーを管理する React の副作用フックです。	AUTO
useThrottle	呼び出しを間引く React フックです。	AUTO
useThrottleFn	関数を呼び出した後、指定されたミリ秒数が経過するまで、後続の関数呼び出しを遅らせる React フック	AUTO
useTitle	ページのタイトルを設定する React の副作用フックです。	AUTO

ライフサイクル

フック	説明	呼び出し
useCustomCompareEffect	依存関係の比較に使用する比較関数を受け取る、変更版の useEffect フックです。	AUTO
useDeepCompareEffect	参照ではなく、依存関係をディープ比較する変更版の useEffect フックです。	AUTO
useEffectOnce	エフェクトを一度だけ実行する React ライフサイクルフックです。	AUTO
useEvent	イベントに handler を登録する React センサーフックです。	AUTO
useIsomorphicLayoutEffect	サーバーサイドレンダリング時に警告が表示されない useLayoutEffect です。[Alex Reardon の記事	AUTO
useLifecycles	マウント時とアンマウント時に mount コールバックと unmount コールバックを呼び出す React ライフサイクルフックです。	AUTO
useLogger	コンポーネントがライフサイクルを遷移する際に、パラメーターをコンソールに出力する React ライフサイクルフックです。	AUTO
useMount	コンポーネントのマウント後に関数を呼び出す React ライフサイクルフックです。useLifecycles を使用してください。	AUTO
useMountedState	> 注意： 名前に State が含まれていますが、このフックはコンポーネントを再レンダリングしません。	AUTO
usePromise	Promise をラップするヘルパー関数を返す React ライフサイクルフックです。	AUTO
useShallowCompareEffect	依存関係をそれぞれ浅く比較する変更版の useEffect フックです。	AUTO
useUnmount	コンポーネントのアンマウント時に関数を呼び出す React ライフサイクルフックです。useLifecycles を使用してください。	AUTO
useUnmountPromise	コンポーネントがアンマウントされた場合に解決されない、高階 Promise を提供するライフサイクルフックです。	AUTO
useUpdateEffect	最初の呼び出し（マウント時など）を無視する React エフェクトフックです。シグネチャはまったく同じです。	AUTO

状態

フック	説明	呼び出し
createGlobalState	グローバルに共有される状態を作成する React フックです。	AUTO
createMemo	メモ化する関数を受け取り、メモ化された React フックを返すフックファクトリーです。	AUTO
createReducer	[React の useReducer](htt と同一の API を備えた、カスタムミドルウェア対応の reducer フックファクトリーです	AUTO
createReducerContext	[React の useReducer](https://reactjs.or のように動作する React コンテキストフックファクトリーです	AUTO
createStateContext	[React の useState](https://reactjs.org/ のように動作する React コンテキストフックファクトリーです	AUTO
useBoolean	useToggle の別名です。切り替え関数を備えたブール値の状態フックです。	AUTO
useCounter	数値を追跡する React 状態フックです。	AUTO
useDefault	状態が null または undefined の場合にデフォルト値を返す React 状態フックです。	AUTO
useFirstMountState	コンポーネントがマウントされた直後（初回レンダー時）なら true、そうでなければ false を返します。	AUTO
useGetSet	状態の代わりに状態ゲッター関数を返す React 状態フックです	AUTO
useGetSetState	useGetSet と useGetSetState を組み合わせたものです。	AUTO
useLatest	[React フック FAQ](https://reactjs の説明にある最新の状態を返す React 状態フックです	AUTO
useList	配列を追跡し、変更するためのメソッドを提供します。	AUTO
useMap	オブジェクトの値を追跡する React 状態フックです。	AUTO
useMediatedState	標準の useState によく似ていますが、仲介プロセスを備えています。	AUTO
useMethods	useReducer の実装を簡略化する React フックです。	AUTO
useMultiStateValidator	指定された状態のいずれかが変化するたびに、バリデーター関数が呼び出されます。	AUTO
useNumber	useCounter の別名です。ユーティリティ関数を備えた数値カウンター状態です。	AUTO
useObservable	Observable の最新の値を追跡する React 状態フックです。	EXTERNAL
usePrevious	[React フック FAQ](https://react の説明にある以前の状態を返す React 状態フックです	AUTO
usePreviousDistinct	usePrevious と同様ですが、値が実際に変化した場合にのみ更新されます。これは重要です	AUTO
useQueue	シンプルな FIFO キューを実装する React 状態フックです。	AUTO
useRafState	[requestAnimationFrame](https://develo のコールバック内でのみ状態を更新する React 状態フックです	AUTO
useRendersCount	初回レンダーを含む、コンポーネントのレンダー回数を追跡します。	AUTO
useSet	[Set](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Referen の値を追跡する React 状態フックです	AUTO
useSetState	同様に動作する setState メソッドを作成する React 状態フックです	AUTO
useStateList	状態リストを循環的に反復処理するためのハンドルを提供します。	AUTO
useStateValidator	指定された状態が変化するたびに、バリデーター関数が呼び出されます。	AUTO
useStateWithHistory	指定数の以前の状態値を保存し、それらをたどるためのハンドルを提供します。	AUTO
useToggle	ブール値を追跡する React 状態フックです。	AUTO

その他

フック	説明	呼び出し方法
useEnsuredForwardedRef	ForwardedRef を安全に使用するための React フックです。	自動