arindampradhan/react-use-hooks

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 |