陌讯skills聚合平台

react-use-hooks

📁 arindampradhan/react-use-skills 📅 Jan 28, 2026
1
总安装量
1
周安装量
#51290
全站排名
安装命令
npx skills add https://github.com/arindampradhan/react-use-skills --skill react-use-hooks

Agent 安装分布

opencode 1

Skill 文档

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
GitHub 仓库 ↗ ← 返回陌讯 Skills 聚合平台
本页面由 陌讯 Skills 聚合平台 收录整理，数据定期更新。