This skill is a decision-and-implementation guide for reause functions in React projects. It maps requirements to the most suitable reause function, 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 reause function can implement the requirement.
- Prefer reause hooks over custom code to improve readability, maintainability, and performance.
- Map requirements to the most appropriate reause function and follow the function’s invocation rule.
- Please refer to the
Invocationfield in the below functions 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.mdmay override a function’s defaultInvocationrule.
Migrating from VueUse
reause is a 1:1 React port of VueUse, so an upstream composable maps onto a single reause function with the same options and a React-adapted return shape:
ref*→useState*(e.g.refDebounced→useStateDebounced)on*→use*(e.g.onClickOutside→useClickOutside)use*RefHistory→useState*History- read-only value sources take a plain
T; values reause should write back take a React state tuple (State<T>, e.g. fromuseState<T>())
Each reference keeps the upstream name in its Map from note, so the VueUse
page can be consulted for behaviour the port preserves.
Functions
All functions listed below are part of the reause library, each section categorizes functions based on their functionality.
IMPORTANT: Each function entry includes a short Description and a detailed Reference. When using any function, always consult the corresponding document in ./references for Usage details and Type Declarations.
Every entry is a React hook (useX) unless its reference says otherwise, and is
exported from the package (@reause/core, @reause/shared, …) named by its
Map from note in the reference.
State
| Function | Description | Invocation |
|---|---|---|
createGlobalState |
Keep state in the global scope | AUTO |
createScopedHook |
Create global state that can be injected into components | AUTO |
createSharedHook |
Make a composable function usable with multiple React components | AUTO |
useAsyncFn |
Returns state and a callback for an async function (or any function returning a promise) |
AUTO |
useAsyncState |
Reactive async state | AUTO |
useControllableState |
A hook for combining controlled and uncontrolled state sources | AUTO |
useCounter |
A basic counter with inc / dec / set / reset and optional min / max bounds |
AUTO |
useLastChanged |
Records the timestamp of the last change | AUTO |
useLatest |
Returns a ref whose .current always holds the latest rendered value |
AUTO |
useList |
Tracks an array and returns it with a stable set of immutable mutators | AUTO |
useListener |
Bind a callback to a listener registration function returned by a reause hook | AUTO |
useLocalStorage |
Reactive LocalStorage | AUTO |
useMap |
A real Map whose mutations re-render |
AUTO |
useMethods |
useReducer sugar — turn an object of pure state transitions into a state value plus one callable method per transition |
AUTO |
usePreviousDistinct |
Just like usePrevious |
AUTO |
useQueue |
State hook that implements a simple FIFO queue | AUTO |
useSafeState |
A useState whose setter is a no-op once the component has unmounted |
AUTO |
useSessionStorage |
Reactive SessionStorage | AUTO |
useSet |
A real Set whose mutations re-render |
AUTO |
useStateDebouncedHistory |
Shorthand for useStateHistory with debounced filter |
AUTO |
useStateHistory |
Track the change history of a state automatically — every change commits a history record — also provides undo and redo functionality | AUTO |
useStateManualHistory |
Manually track the change history of a state when the user calls commit() |
AUTO |
useStateThrottledHistory |
Shorthand for useStateHistory with throttled filter |
AUTO |
useStorage |
Create a controllable state that can be used to access & modify LocalStorage or SessionStorage | AUTO |
useStorageAsync |
Reactive Storage with async support | AUTO |
Elements
| Function | Description | Invocation |
|---|---|---|
useActiveElement |
Reactive document.activeElement |
AUTO |
useCollapse |
Animate an element's height between 0 and its measured content height |
AUTO |
useDocumentVisibility |
Reactively track document.visibilityState |
AUTO |
useDraggable |
Make elements draggable | AUTO |
useDropZone |
Create a zone where files can be dropped | AUTO |
useElementBounding |
Reactive bounding box of an HTML element | AUTO |
useElementOverflow |
Reactive element's overflow state | AUTO |
useElementSize |
Reactive size of an HTML element | AUTO |
useElementVisibility |
Tracks the visibility of an element within the viewport | AUTO |
useIntersectionObserver |
Detects changes to a target element's visibility | AUTO |
useMouseInElement |
Reactive mouse position related to an element | AUTO |
useMutationObserver |
Watch for changes being made to the DOM tree | AUTO |
useParentElement |
Get parent element of the given element | AUTO |
useResizeObserver |
Reports changes to the dimensions of an Element's content or the border-box | AUTO |
useSplitter |
A hook for resizable panel layouts that supports dragging and keyboard interactions | AUTO |
useWindowFocus |
Reactive window focus state | AUTO |
useWindowScroll |
Reactive window scroll | AUTO |
useWindowSize |
Reactive window size | AUTO |
Browser
| Function | Description | Invocation |
|---|---|---|
useBluetooth |
Reactive Web Bluetooth API | AUTO |
useBreakpoints |
Reactive viewport breakpoints | AUTO |
useBroadcastChannel |
Reactive BroadcastChannel API | AUTO |
useBrowserLocation |
Reactive browser location | AUTO |
useClipboard |
Reactive Clipboard API | AUTO |
useClipboardItems |
Reactive Clipboard API | AUTO |
useColorMode |
Reactive color mode (dark / light / customs) with auto data persistence | AUTO |
useCssSupports |
SSR compatible and reactive CSS.supports |
AUTO |
useCssVar |
Manipulate CSS variables | AUTO |
useDark |
Reactive dark mode with auto data persistence | AUTO |
useEventListener |
Use EventListener with ease | AUTO |
useEyeDropper |
Reactive EyeDropper API | AUTO |
useFavicon |
Reactive favicon | AUTO |
useFileDialog |
Open file dialog with ease | AUTO |
useFileSystemAccess |
Create and read and write local files with FileSystemAccessAPI | AUTO |
useFullscreen |
Reactive Fullscreen API | AUTO |
useGamepad |
Provides reactive bindings for the Gamepad API | AUTO |
useHash |
Shorthand for a reactive window.location.hash |
AUTO |
useImage |
Reactive load an image in the browser | AUTO |
useLiveAnnouncer |
Accessible way to announce messages to screen reader users (ARIA live regions) | AUTO |
useMask |
Input masking engine | AUTO |
useMediaControls |
Reactive media controls for both audio and video elements |
AUTO |
useMediaQuery |
Reactive Media Query | AUTO |
useMemory |
Reactive Memory Info | AUTO |
useObjectUrl |
Reactive URL representing an object | AUTO |
useParams |
Shorthand for a reactive path parameter in window.location.pathname |
AUTO |
usePerformanceObserver |
Observe performance metrics | AUTO |
usePermission |
Reactive Permissions API state | AUTO |
usePreferredColorScheme |
Reactive prefers-color-scheme media query |
AUTO |
usePreferredContrast |
Reactive prefers-contrast media query |
AUTO |
usePreferredDark |
Reactive prefers-color-scheme: dark media query |
AUTO |
usePreferredLanguages |
Reactive Navigator Languages | AUTO |
usePreferredReducedMotion |
Reactive prefers-reduced-motion media query |
AUTO |
usePreferredReducedTransparency |
Reactive prefers-reduced-transparency media query |
AUTO |
useQuery |
Shorthand for a reactive query parameter in window.location.search |
AUTO |
useScreenOrientation |
Reactive Screen Orientation API | AUTO |
useScreenSafeArea |
Reactive env(safe-area-inset-*) |
AUTO |
useScriptTag |
Creates a script tag | AUTO |
useShare |
Reactive Web Share API | AUTO |
useSSRWidth |
Used to set a global viewport width which will be used when rendering SSR components that rely on the viewport width like useMediaQuery or useBreakpoints |
AUTO |
useStyleTag |
Inject reactive style element in head |
AUTO |
useTextareaAutosize |
Automatically update the height of a textarea depending on the content | AUTO |
useTextDirection |
Reactive dir of the element's text | AUTO |
useTitle |
Reactive document title | AUTO |
useUrlSearchParams |
Reactive URLSearchParams | AUTO |
useVibrate |
Reactive Vibration API | AUTO |
useWakeLock |
Reactive Screen Wake Lock API | AUTO |
useWebMCP |
Register a WebMCP tool and tie its lifecycle to the current component | AUTO |
useWebNotification |
Reactive Notification | AUTO |
useWebSocket |
Reactive WebSocket client | AUTO |
useWebWorker |
Simple Web Workers registration and communication | AUTO |
useWebWorkerFn |
Run expensive functions without blocking the UI | AUTO |
Sensors
| Function | Description | Invocation |
|---|---|---|
useBattery |
Reactive Battery Status API | AUTO |
useClickAway |
Fire a handler when a click lands outside one or more target elements | AUTO |
useClickOutside |
Listen for clicks outside of an element | AUTO |
useDeviceMotion |
Reactive DeviceMotionEvent | AUTO |
useDeviceOrientation |
Reactive DeviceOrientationEvent | AUTO |
useDevicePixelRatio |
Reactively track window.devicePixelRatio |
AUTO |
useDevicesList |
Reactive enumerateDevices listing available input/output devices |
AUTO |
useDisplayMedia |
Reactive mediaDevices.getDisplayMedia streaming |
AUTO |
useElementByPoint |
Reactive element by point | AUTO |
useElementHover |
Reactive element's hover state | AUTO |
useElementRemoval |
Fires when the element or any element containing it is removed from the DOM | AUTO |
useFocus |
Reactive utility to track or set the focus state of a DOM element | AUTO |
useFocusReturn |
Return focus to the element that was active before an overlay opened | AUTO |
useFocusWithin |
Reactive utility to track if an element or one of its descendants has focus | AUTO |
useFps |
Reactive FPS (frames per second) | AUTO |
useGeolocation |
Reactive Geolocation API | AUTO |
useHotkeys |
Keyboard shortcuts written as hotkey strings — mod+K means ⌘K on Apple hardware and Ctrl+K elsewhere |
AUTO |
useIdle |
Tracks whether the user is being inactive | AUTO |
useInfiniteScroll |
Infinite scrolling of the element | AUTO |
useKeyModifier |
Reactive Modifier State | AUTO |
useKeyPress |
Listen for a key press by keyCode |
AUTO |
useKeyStroke |
Listen for keyboard keystrokes | AUTO |
useLongPress |
Listen for a long press on an element | AUTO |
useMagicKeys |
Reactive keys pressed state | AUTO |
useMouse |
Reactive mouse position | AUTO |
useMousePressed |
Reactive mouse pressing state | AUTO |
useNavigatorLanguage |
Reactive navigator.language | AUTO |
useNetwork |
Reactive Network status | AUTO |
useOnline |
Reactive online state | AUTO |
usePageLeave |
Reactive state to show whether the mouse leaves the page | AUTO |
useParallax |
Create parallax effect easily | AUTO |
usePointer |
Reactive pointer state | AUTO |
usePointerLock |
Reactive pointer lock | AUTO |
usePointerSwipe |
Reactive swipe detection based on PointerEvents | AUTO |
useScroll |
Reactive scroll position and state | AUTO |
useScrollLock |
Lock scrolling of the element | AUTO |
useSpeechRecognition |
Reactive SpeechRecognition | AUTO |
useSpeechSynthesis |
Reactive SpeechSynthesis | AUTO |
useStartTyping |
Fires when users start typing on non-editable elements | AUTO |
useSwipe |
Reactive swipe detection based on TouchEvents |
AUTO |
useTextSelection |
Reactively track user text selection based on Window.getSelection |
AUTO |
useUserMedia |
Streaming via mediaDevices.getUserMedia |
AUTO |
Network
| Function | Description | Invocation |
|---|---|---|
useEventSource |
An EventSource or Server-Sent-Events instance opens a persistent connection to an HTTP server | AUTO |
useFetch |
Reactive Fetch API provides the ability to abort requests | AUTO |
Animation
| Function | Description | Invocation |
|---|---|---|
useAnimate |
Reactive Web Animations API | AUTO |
useInterval |
Reactive counter that increases on every interval | AUTO |
useIntervalFn |
Wrapper for setInterval with controls |
AUTO |
useIntervalRafFn |
Fire a callback repeatedly on animation frames | AUTO |
useNow |
Reactive current Date instance | AUTO |
useRafFn |
Call function on every requestAnimationFrame |
AUTO |
useRafState |
State updates coalesced into an animation frame | AUTO |
useTimeout |
A reactive value that becomes true after a given time |
AUTO |
useTimeoutFn |
Wrapper for setTimeout with controls |
AUTO |
useTimeoutRafFn |
Fire a callback once on the first animation frame at or after a delay | AUTO |
useTimestamp |
Reactive current timestamp (Date.now() + offset) |
AUTO |
useTransition |
Transition between values | AUTO |
useUpdate |
A force-update hook | AUTO |
Component
| Function | Description | Invocation |
|---|---|---|
createPortalSlot |
Define and reuse a template inside the component scope | AUTO |
createPromisifiedComponent |
Template as Promise | AUTO |
unrefElement |
Get the DOM element a React ref object currently holds | AUTO |
useMounted |
Mounted state in ref | AUTO |
useRefsList |
Shorthand for binding refs to elements rendered inside a list | AUTO |
useVirtualList |
Create virtual lists with ease | AUTO |
Watch
| Function | Description | Invocation |
|---|---|---|
until |
Promised one-time watch for changes | AUTO |
useWatch |
Watches a source — a single value or an array of values — and invokes a callback with `(value | AUTO |
useWatchArray |
Watches an array value and reports which items were added and removed since the previous list | AUTO |
useWatchAtMost |
Like useWatch |
AUTO |
useWatchDebounced |
Debounced watch | AUTO |
useWatchDeep |
Shorthand for watching a value with { deep: true } — invokes the callback only when the value differs deeply from the previous one |
AUTO |
useWatchIgnorable |
Ignorable watch — extended watch that returns ignoreUpdates(updater) / ignorePrevAsyncUpdates() / stop to ignore particular updates to the source |
AUTO |
useWatchImmediate |
Shorthand for watching value with { immediate: true } |
AUTO |
useWatchOnce |
Shorthand for watching value with { once: true } |
AUTO |
useWatchPausable |
Pausable watch — pause and resume a watched value's updates | AUTO |
useWatchThrottled |
Throttled watch | AUTO |
useWatchTriggerable |
Watch that can be triggered manually | AUTO |
useWatchWithFilter |
watch with additional EventFilter control |
AUTO |
useWhenever |
Shorthand for watching value to be truthy | AUTO |
Reactivity
| Function | Description | Invocation |
|---|---|---|
syncState |
Two-way state synchronization between two writable State<T> sources |
AUTO |
syncStates |
Keep target state(s) in sync with a source value | AUTO |
useAsync |
Derived value for async functions | AUTO |
useStateAutoReset |
A controllable state which will be reset to the default value after some time | AUTO |
useStateDebounced |
A controllable state which will be debounced | AUTO |
useStateDefault |
Apply default value to a ref | AUTO |
useStateManualReset |
A state with manual reset functionality | AUTO |
useStateThrottled |
Throttle changing of a state value | AUTO |
useStateWithControl |
Fine-grained controls over a state and its re-renders | AUTO |
Array
| Function | Description | Invocation |
|---|---|---|
useArrayDifference |
Reactive get array difference of two arrays | AUTO |
useArrayEvery |
Reactive Array.every |
AUTO |
useArrayFilter |
Reactive Array.filter |
AUTO |
useArrayFind |
Reactive Array.find |
AUTO |
useArrayFindIndex |
Reactive Array.findIndex |
AUTO |
useArrayFindLast |
Reactive Array.findLast |
AUTO |
useArrayIncludes |
Reactive Array.includes |
AUTO |
useArrayJoin |
Reactive Array.join |
AUTO |
useArrayMap |
Reactive Array.map |
AUTO |
useArrayReduce |
Reactive Array.reduce |
AUTO |
useArraySome |
Reactive Array.some |
AUTO |
useArrayUnique |
Reactive unique array | AUTO |
useSorted |
Reactive sorted array | AUTO |
Time
| Function | Description | Invocation |
|---|---|---|
useCountdown |
Reactive countdown timer in seconds | AUTO |
useDateFormat |
Get the formatted date according to the string of tokens passed in | AUTO |
useTemporalNow |
Reactive Temporal API with timezone conversion and calendar system support | AUTO |
useTimeAgo |
Reactive time ago | AUTO |
useTimeAgoIntl |
Reactive time ago with i18n supported | AUTO |
Utilities
| Function | Description | Invocation |
|---|---|---|
createEventHook |
Utility for creating event hooks | AUTO |
isDefined |
Non-nullish checking type guard for React ref objects and plain values | AUTO |
makeDestructurable |
Make isomorphic destructurable for object and array at the same time | AUTO |
useAsyncQueue |
Executes each asynchronous task sequentially and passes the current task result to the next task | AUTO |
useBase64 |
Reactive base64 transforming | AUTO |
useCached |
Cache a value with a custom comparator | AUTO |
useCloned |
Reactive clone of a value | AUTO |
useConfirmDialog |
Creates event hooks to support modals and confirmation dialog chains | AUTO |
useConst |
Return a value that is computed once | AUTO |
useCycleList |
Cycle through a list of items | AUTO |
useDebounceFn |
Debounce execution of a function | AUTO |
useEventBus |
A basic event bus | AUTO |
useId |
SSR-safe id with an optional static override | AUTO |
useMemoize |
Cache results of functions depending on arguments | AUTO |
useOffsetPagination |
Reactive offset pagination | AUTO |
usePrevious |
Holds the previous value of a source | AUTO |
useStepper |
Provides helpers for building a multi-step wizard interface | AUTO |
useSupported |
SSR compatibility isSupported |
AUTO |
useThrottleFn |
Throttle execution of a function | AUTO |
useTimeoutPoll |
Use timeout to poll something — it triggers the callback after the last task is done | AUTO |
useToggle |
A boolean (or value) toggler with controllable state support | AUTO |
useToNumber |
Convert a string or number value to a number | AUTO |
useToString |
Convert a value to its string representation | AUTO |
@Electron
| Function | Description | Invocation |
|---|---|---|
useIpcRenderer |
Provides ipcRenderer and all of its APIs | EXTERNAL |
useIpcRendererInvoke |
Reactive ipcRenderer.invoke API result | EXTERNAL |
useIpcRendererOn |
Use ipcRenderer.on with ease and ipcRenderer.removeListener automatically on unmounted | EXTERNAL |
useZoomFactor |
Reactive WebFrame zoom factor | EXTERNAL |
useZoomLevel |
Reactive WebFrame zoom level | EXTERNAL |
@Firebase
| Function | Description | Invocation |
|---|---|---|
useAuth |
Reactive Firebase Auth binding | EXTERNAL |
useFirestore |
Reactive Firestore binding | EXTERNAL |
useRTDB |
Reactive Firebase Realtime Database binding | EXTERNAL |
@Integrations
| Function | Description | Invocation |
|---|---|---|
useAsyncValidator |
Wrapper for async-validator |
EXTERNAL |
useAxios |
Wrapper for axios |
EXTERNAL |
useChangeCase |
Reactive wrapper for change-case |
EXTERNAL |
useCookies |
Wrapper for universal-cookie |
EXTERNAL |
useDrauu |
Reactive instance for drauu | EXTERNAL |
useFocusTrap |
Reactive wrapper for focus-trap |
EXTERNAL |
useFuse |
Easily implement fuzzy search using a hook with Fuse.js | EXTERNAL |
useIDBKeyval |
Wrapper for idb-keyval |
EXTERNAL |
useJwt |
Wrapper for jwt-decode |
EXTERNAL |
useNProgress |
Reactive wrapper for nprogress |
EXTERNAL |
useQRCode |
Wrapper for qrcode |
EXTERNAL |
useSortable |
Wrapper for sortablejs |
EXTERNAL |
@Math
| Function | Description | Invocation |
|---|---|---|
createGenericProjection |
Generic version of createProjection |
EXTERNAL |
createProjection |
Reactive numeric projection from one domain to another | EXTERNAL |
logicAnd |
AND condition for values |
EXTERNAL |
logicNot |
NOT condition for values |
EXTERNAL |
logicOr |
OR conditions for values |
EXTERNAL |
useAbs |
Reactive Math.abs |
EXTERNAL |
useAverage |
Get the average of an array reactively | EXTERNAL |
useCeil |
Reactive Math.ceil |
EXTERNAL |
useClamp |
Reactively clamp a value between two other values | EXTERNAL |
useFloor |
Reactive Math.floor |
EXTERNAL |
useMath |
Reactive Math methods |
EXTERNAL |
useMax |
Reactive Math.max |
EXTERNAL |
useMin |
Reactive Math.min |
EXTERNAL |
usePrecision |
Reactively set the precision of a number | EXTERNAL |
useProjection |
Reactive numeric projection from one domain to another | EXTERNAL |
useRound |
Reactive Math.round |
EXTERNAL |
useSum |
Get the sum of an array reactively | EXTERNAL |
useTrunc |
Truncates a number | EXTERNAL |
@RxJS
| Function | Description | Invocation |
|---|---|---|
toObserver |
Sugar function to convert a ref object (RefObject) or a setter function into an RxJS Observer — a useRef write does not re-render |
EXTERNAL |
useExtractedObservable |
Use an RxJS Observable as extracted from one or more hooks |
EXTERNAL |
useFrom |
Create an Observable from an rxjs ObservableInput — passed straight to RxJS's from() — or from a plain value that re-emits whenever it changes across renders |
EXTERNAL |
useObservable |
Use an RxJS Observable |
EXTERNAL |
useSubject |
Bind an RxJS Subject to a controllable state and propagate value changes both ways |
EXTERNAL |
useSubscription |
Use an RxJS Subscription without worrying about unsubscribing from it or creating memory leaks |
EXTERNAL |
useWatchExtractedObservable |
Watch the values of an RxJS Observable as extracted from one or more hooks |
EXTERNAL |
Factory
| Function | Description | Invocation |
|---|---|---|
createMemo |
Turn a pure function into a memoising hook | AUTO |
createReducer |
Build a useReducer-shaped hook around a Redux-style middleware chain |
AUTO |
Lifecycle
| Function | Description | Invocation |
|---|---|---|
useDeepCompareEffect |
useEffect whose dependency comparison is deep |
AUTO |
useEffectOnce |
Runs an effect once after the component mounts | AUTO |
useIsFirstRender |
true on the very first render of a component instance and false on every render after it |
AUTO |
useIsomorphicLayoutEffect |
useLayoutEffect on the client |
AUTO |
useLogger |
Console-log a component's lifecycle transitions — mount | AUTO |
useMount |
Runs a callback once after the component mounts | AUTO |
useShallowCompareEffect |
useEffect whose dependency list is compared by one-level (shallow) equality instead of reference identity |
AUTO |
useTrackedEffect |
useEffect that also reports which dependencies changed |
AUTO |
useUnmount |
Runs a callback when the component unmounts | AUTO |
useUnmountedRef |
A ref that reports whether the component has unmounted | AUTO |
useUpdateEffect |
useEffect that skips the first render |
AUTO |
Side-effects
| Function | Description | Invocation |
|---|---|---|
useError |
Returns a stable error dispatcher that re-throws on the next render | AUTO |
useLockFn |
Add a lock to an async function so overlapping calls are dropped | AUTO |
useMemoizedFn |
Keep a function's identity stable while always calling its latest implementation | AUTO |