react-use-hooks

Apply react-use hooks where appropriate to build concise, maintainable React features.

arindampradhan 3 Updated 4mo ago

Resources

GitHub

Install

npx skillscat add arindampradhan/react-use-skills/react-use-hooks

Install via the SkillsCat registry.

SKILL.md

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

Resources

Install

React-Use Hooks

When to Apply

Hooks

Sensors

UI

Animations

Side-Effects

Lifecycles

State

Miscellaneous

Categories

Install

Recommended Skills