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