react-use-hooks

name	react-use-hooks
description	Apply react-use hooks where appropriate to build concise, maintainable React features.
license	Unlicense
metadata	{"author":"Adapted from streamich/react-use","version":"1.0"}
compatibility	Requires React 16.8+ with hooks support

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.	AUTO
useKeyboardJs	React UI sensor hook that detects complex key combos like detecting when	EXTERNAL
useKeyPress	React UI sensor hook that detects when the user is pressing a specific	AUTO
useKeyPressEvent	This hook fires keydown and keyup callbacks, similar to how useKey	AUTO
useLocation	React sensor hook that tracks brower's location.	AUTO
useLongPress	React sensor hook that fires a callback after long pressing.	AUTO
useMeasure	React sensor hook that tracks dimensions of an HTML element using the [Resize Observer API](https://	AUTO
useMedia	React sensor hook that tracks state of a CSS media query.	AUTO
useMediaDevices	React sensor hook that tracks connected hardware devices.	AUTO
useMotion	React sensor hook that uses device's acceleration sensor to track its motions.	AUTO
useMouse	React sensor hooks that re-render on mouse position changes. useMouse simply tracks	AUTO
useMouseHovered	Extended mouse tracking with options for bounded coordinates and hover-only tracking.	AUTO
useMouseWheel	React Hook to get deltaY of mouse scrolled in window.	AUTO
useNetworkState	Tracks the state of browser's network connection.	AUTO
useOrientation	React sensor hook that tracks screen orientation of user's device.	AUTO
usePageLeave	React sensor hook that fires a callback when mouse leaves the page.	AUTO
usePinchZoom	React sensor hook that tracks the changes in pointer touch events and detects value of pinch differe	AUTO
useScratch	React sensor hook that tracks state of mouse "scrubs" (or "scratches").	AUTO
useScroll	React sensor hook that re-renders when the scroll position in a DOM element changes.	AUTO
useScrollbarWidth	Hook that will return current browser's scrollbar width.	AUTO
useScrolling	React sensor hook that keeps track of whether the user is scrolling or not.	AUTO
useSearchParam	React sensor hook that tracks browser's location search param.	AUTO
useSize	React sensor hook that tracks size of an HTML element.	AUTO
useStartTyping	React sensor hook that fires a callback when user starts typing. Can be used	AUTO
useWindowScroll	React sensor hook that re-renders on window scroll.	AUTO
useWindowSize	React sensor hook that tracks dimensions of the browser window.	AUTO

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 <video> element, tracks its state and exposes playback controls.	AUTO

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
useFavicon	React side-effect hook sets the favicon of the page.	AUTO
useLocalStorage	React side-effect hook that manages a single localStorage key.	AUTO
useLockBodyScroll	React side-effect hook that locks scrolling on the body element. Useful for modal and other overlay	AUTO
usePermission	React side-effect hook to query permission status of browser APIs.	AUTO
useRafLoop	This hook call given function within the RAF loop without re-rendering parent component.	AUTO
useSessionStorage	React side-effect hook that manages a single sessionStorage key.	AUTO
useThrottle	React hooks that throttle.	AUTO
useThrottleFn	React hook that invokes a function and then delays subsequent function calls until after wait millis	AUTO
useTitle	React side-effect hook that sets title of the page.	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	AUTO
useMountedState	> NOTE!: despite having State in its name this hook does not cause component re-render.	AUTO
usePromise	React Lifecycle hook that returns a helper function for wrapping promises.	AUTO
useShallowCompareEffect	A modified useEffect hook that is using shallow comparison on each of its dependencies instead of re	AUTO
useUnmount	React lifecycle hook that calls a function when the component will unmount. Use useLifecycles if y	AUTO
useUnmountPromise	A life-cycle hook that provides a higher order promise that does not resolve if component un-mounts.	AUTO
useUpdateEffect	React effect hook that ignores the first invocation (e.g. on mount). The signature is exactly the sa	AUTO

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.	AUTO
useFirstMountState	Returns true if component is just mounted (on first render) and false otherwise.	AUTO
useGetSet	React state hook that returns state getter function instead of	AUTO
useGetSetState	A mix of useGetSet and useGetSetState.	AUTO
useLatest	React state hook that returns the latest state as described in the [React hooks FAQ](https://reactjs	AUTO
useList	Tracks an array and provides methods to modify it.	AUTO
useMap	React state hook that tracks a value of an object.	AUTO
useMediatedState	A lot like the standard useState, but with mediation process.	AUTO
useMethods	React hook that simplifies the useReducer implementation.	AUTO
useMultiStateValidator	Each time any of given states changes - validator function is invoked.	AUTO
useNumber	Alias for useCounter. Numeric counter state with utility functions.	AUTO
useObservable	React state hook that tracks the latest value of an Observable.	EXTERNAL
usePrevious	React state hook that returns the previous state as described in the [React hooks FAQ](https://react	AUTO
usePreviousDistinct	Just like usePrevious but it will only update once the value actually changes. This is important w	AUTO
useQueue	React state hook implements simple FIFO queue.	AUTO
useRafState	React state hook that only updates state in the callback of [requestAnimationFrame](https://develo	AUTO
useRendersCount	Tracks component's renders count including the first render.	AUTO
useSet	React state hook that tracks a [Set](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Referen	AUTO
useSetState	React state hook that creates setState method which works similar to how	AUTO
useStateList	Provides handles for circular iteration over states list.	AUTO
useStateValidator	Each time given state changes - validator function is invoked.	AUTO
useStateWithHistory	Stores defined amount of previous state values and provides handles to travel through them.	AUTO
useToggle	React state hook that tracks value of a boolean.	AUTO

Miscellaneous

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