react-use-hooks

name	react-use-hooks
description	Apply react-use hooks where appropriate to build concise, maintainable React features. Use when this capability is needed.
metadata	{"author":"arindampradhan"}

React-Use Hooks

This skill is a decision-and-implementation guide for react-use hooks in React projects. It maps requirements to the most suitable react-use hook, applies the correct usage pattern, and prefers hook-based solutions over bespoke code to keep implementations concise, maintainable, and performant.

When to Apply

• Apply this skill whenever assisting user development work in React.
• Always check first whether a react-use hook can implement the requirement.
• Prefer react-use hooks over custom code to improve readability, maintainability, and performance.
• Map requirements to the most appropriate hook and follow the hook's invocation rule.
• Please refer to the Invocation field in the below hooks table. For example:
  • AUTO: Use automatically when applicable.
  • EXTERNAL: Use only if the user already installed the required external dependency; otherwise reconsider, and ask to install only if truly needed.
  • EXPLICIT_ONLY: Use only when explicitly requested by the user.

  NOTE User instructions in the prompt or AGENTS.md may override a hook's default Invocation rule.

Hooks

All hooks listed below are part of the react-use library, each section categorizes hooks based on their functionality.

IMPORTANT: Each hook entry includes a short Description and a detailed Reference. When using any hook, always consult the corresponding document in ./references for Usage details and Type Declarations.

Sensors

Hook	Description	Invocation
createBreakpoint	laptopL: 1440, laptop: 1024, tablet: 768	AUTO
useBattery	React sensor hook that tracks battery status.	AUTO
useGeolocation	React sensor hook that tracks user's geographic location. This hook accepts [position options](https	AUTO
useHash	React sensor hook that tracks browser's location hash.	AUTO
useHover	React UI sensor hooks that track if some element is being hovered	AUTO
useHoverDirty	Tracks mouse hover state using a ref (more direct than useHover).	AUTO
useIdle	React sensor hook that tracks if user on the page is idle.	AUTO
useIntersection	React sensor hook that tracks the changes in the intersection of a target element with an ancestor e	AUTO
useKey	React UI sensor hook that executes a handler when a keyboard key is used.

UI

Hook	Description	Invocation
useAudio	Creates <audio> element, tracks its state and exposes playback controls.	AUTO
useClickAway	React UI hook that triggers a callback when user	AUTO
useCss	React UI hook that changes [CSS dynamically][gen-5]. Works like "virtual CSS" —	AUTO
useDrop	Triggers on file, link drop and copy-paste.	AUTO
useFullscreen	Display an element full-screen, optional fallback for fullscreen video on iOS.	AUTO
useSlider	React UI hook that provides slide behavior over any HTML element. Supports both mouse and touch even	AUTO
useSpeech	React UI hook that synthesizes human voice that speaks a given string.	AUTO
useVibrate	React UI hook to provide physical feedback with device vibration hardware using the [Vibration API](	AUTO
useVideo	Creates element, tracks its state and exposes playback controls.

Animations

Hook	Description	Invocation
useHarmonicIntervalFn	Same as useInterval hook, but triggers all effects with the same delay	AUTO
useInterval	A declarative interval hook based on [Dan Abramov's article on overreacted.io](https://overreacted.i	AUTO
useRaf	React animation hook that forces component to re-render on each requestAnimationFrame,	AUTO
useSpring	React animation hook that updates a single numeric value over time according	EXTERNAL
useTimeout	Re-renders the component after a specified number of milliseconds.	AUTO
useTimeoutFn	Calls given function after specified amount of milliseconds.	AUTO
useTween	React animation hook that tweens a number between 0 and 1.	AUTO
useUpdate	React utility hook that returns a function that forces component	AUTO

Side-Effects

Hook	Description	Invocation
useAsync	React hook that resolves an async function or a function that returns	AUTO
useAsyncFn	React hook that returns state and a callback for an async function or a	AUTO
useAsyncRetry	Uses useAsync with an additional retry method to easily retry/refresh the async function;	AUTO
useBeforeUnload	React side-effect hook that shows browser alert when user try to reload or close the page.	AUTO
useCookie	React hook that returns the current value of a cookie, a callback to update the cookie	AUTO
useCopyToClipboard	Copy text to a user's clipboard.	AUTO
useDebounce	React hook that delays invoking a function until after wait milliseconds have elapsed since the last	AUTO
useError	React side-effect hook that returns an error dispatcher.	AUTO

Lifecycles

Hook	Description	Invocation
useCustomCompareEffect	A modified useEffect hook that accepts a comparator which is used for comparison on dependencies ins	AUTO
useDeepCompareEffect	A modified useEffect hook that is using deep comparison on its dependencies instead of reference equ	AUTO
useEffectOnce	React lifecycle hook that runs an effect only once.	AUTO
useEvent	React sensor hook that subscribes a handler to events.	AUTO
useIsomorphicLayoutEffect	useLayoutEffect that does not show warning when server-side rendering, see [Alex Reardon's article	AUTO
useLifecycles	React lifecycle hook that call mount and unmount callbacks, when	AUTO
useLogger	React lifecycle hook that console logs parameters as component transitions through lifecycles.	AUTO
useMount	React lifecycle hook that calls a function after the component is mounted. Use useLifecycles if yo

State

Hook	Description	Invocation
createGlobalState	A React hook that creates a globally shared state.	AUTO
createMemo	Hook factory, receives a function to be memoized, returns a memoized React hook,	AUTO
createReducer	Factory for reducer hooks with custom middleware with an identical API as [React's useReducer](htt	AUTO
createReducerContext	Factory for react context hooks that will behave just like [React's useReducer](https://reactjs.or	AUTO
createStateContext	Factory for react context hooks that will behave just like [React's useState](https://reactjs.org/	AUTO
useBoolean	Alias for useToggle. Boolean state hook with a toggle function.	AUTO
useCounter	React state hook that tracks a numeric value.	AUTO
useDefault	React state hook that returns the default value when state is null or undefined.

Miscellaneous

Hook	Description	Invocation
useEnsuredForwardedRef	React hook to use a ForwardedRef safely.	AUTO

---

Converted and distributed by TomeVault — claim your Tome and manage your conversions.