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

react-use-hooks

NPX Install

Tags

SKILL.md Content