SKILL.md
react-use
The skill is based on react-use v17.6.0, generated at 2026-01-29.
react-use is a collection of essential React Hooks that provide ready-to-use functionality for common patterns in React applications. It includes hooks for sensors, UI interactions, animations, side-effects, lifecycle management, and state management.
Core References
Topic
Description
Reference
Usage
Import patterns and tree-shaking recommendations
Sensors
Sensor hooks listen to changes in browser APIs and device interfaces, forcing components to re-render with updated state.
Topic
Description
Reference
useBattery
Tracks device battery status
useGeolocation
Tracks geo location state of user's device
useHover
Tracks mouse hover state of an element
useHash
Tracks location hash value
useIdle
Tracks whether user is being inactive
useIntersection
Tracks an HTML element's intersection
useKey
Tracks key presses
useKeyPress
Tracks key press state
useKeyPressEvent
Handles key press events
useKeyboardJs
Tracks keyboard key combinations
useLocation
Tracks page navigation bar location state
useSearchParam
Tracks URL search parameters
useLongPress
Tracks long press gesture
useMedia
Tracks state of a CSS media query
useMediaDevices
Tracks state of connected hardware devices
useMotion
Tracks state of device's motion sensor
useMouse
Tracks state of mouse position
useMouseWheel
Tracks deltaY of scrolled mouse wheel
useNetworkState
Tracks browser's network connection state
useOrientation
Tracks device's screen orientation
usePageLeave
Triggers when mouse leaves page boundaries
useScratch
Tracks mouse click-and-scrub state
useScroll
Tracks an HTML element's scroll position
useScrolling
Tracks whether HTML element is scrolling
useStartTyping
Detects when user starts typing
useWindowScroll
Tracks Window scroll position
useWindowSize
Tracks Window dimensions
useMeasure
Tracks an HTML element's dimensions
useSize
Tracks element size
createBreakpoint
Tracks innerWidth with breakpoints
useScrollbarWidth
Detects browser's native scrollbars width
usePinchZoom
Tracks pointer events to detect pinch zoom
UI
UI hooks allow you to control and subscribe to state changes of UI elements.
Topic
Description
Reference
useAudio
Plays audio and exposes its controls
useClickAway
Triggers callback when user clicks outside target area
useCss
Dynamically adjusts CSS
useDrop
Tracks file, link and copy-paste drops
useFullscreen
Display an element or video full-screen
useSlider
Provides slide behavior over any HTML element
useSpeech
Synthesizes speech from a text string
useVibrate
Provides physical feedback using Vibration API
useVideo
Plays video, tracks its state, and exposes playback controls
Animations
Animation hooks usually interpolate numeric values over time.
Topic
Description
Reference
useRaf
Re-renders component on each requestAnimationFrame
useInterval
Re-renders component on a set interval
useHarmonicIntervalFn
Harmonic interval function
useSpring
Interpolates number over time according to spring dynamics
useTimeout
Re-renders component after a timeout
useTimeoutFn
Calls given function after a timeout
useTween
Re-renders component while tweening a number from 0 to 1
useUpdate
Returns a callback which re-renders component when called
Side-effects
Side-effect hooks allow your app to trigger various side-effects using browser's API.
Topic
Description
Reference
useAsync
Resolves an async function
useAsyncFn
Async function with manual execution
useAsyncRetry
Async function with retry capability
useBeforeUnload
Shows browser alert when user tries to reload or close the page
useCookie
Provides way to read, update and delete a cookie
useCopyToClipboard
Copies text to clipboard
side-effects-copy-to-clipboard
useDebounce
Debounces a function
useError
Error dispatcher
useFavicon
Sets favicon of the page
useLocalStorage
Manages a value in localStorage
useSessionStorage
Manages a value in sessionStorage
useLockBodyScroll
Locks scrolling of the body element
useRafLoop
Calls given function inside the RAF loop
useThrottle
Throttles a function
useThrottleFn
Throttle function variant
useTitle
Sets title of the page
usePermission
Query permission status for browser APIs
Lifecycles
Lifecycle hooks modify and extend built-in React hooks or imitate React Class component lifecycle patterns.
Topic
Description
Reference
useEffectOnce
Modified useEffect that only runs once
useEvent
Subscribe to events
useLifecycles
Calls mount and unmount callbacks
useMountedState
Tracks if component is mounted
useUnmountPromise
Track if component is mounted with promise support
usePromise
Resolves promise only while component is mounted
useLogger
Logs in console as component goes through life-cycles
useMount
Calls mount callbacks
useUnmount
Calls unmount callbacks
useUpdateEffect
Run an effect only on updates
useIsomorphicLayoutEffect
useLayoutEffect that works on server
lifecycles-isomorphic-layout-effect
useDeepCompareEffect
useEffect with deep comparison
lifecycles-deep-compare-effect
useShallowCompareEffect
useEffect with shallow comparison
lifecycles-shallow-compare-effect
useCustomCompareEffect
useEffect with custom comparison function
lifecycles-custom-compare-effect
State
State hooks allow you to easily manage state of booleans, arrays, and maps.
Topic
Description
Reference
createMemo
Factory of memoized hooks
createReducer
Factory of reducer hooks with custom middleware
createReducerContext
Factory of hooks for sharing state between components
createStateContext
Factory of hooks for sharing state between components
createGlobalState
Cross component shared state
useDefault
Returns the default value when state is null or undefined
useGetSet
Returns state getter get() instead of raw state
useGetSetState
Combination of useGetSet and useSetState
useLatest
Returns the latest state or props
usePrevious
Returns the previous state or props
usePreviousDistinct
Like usePrevious but with a predicate
useObservable
Tracks latest value of an Observable
useRafState
Creates setState method which only updates after requestAnimationFrame
useSetState
Creates setState method which works like this.setState
useToggle
Tracks state of a boolean
useCounter
Tracks state of a number
useList
Tracks state of an array
useMap
Tracks state of an object
useSet
Tracks state of a Set
useQueue
Implements simple queue
useStateList
Circularly iterates over an array
useStateValidator
Validates state with a validator function
useStateWithHistory
Stores previous state values and provides handles to travel through them
useMultiStateValidator
Alike useStateValidator but tracks multiple states
useMediatedState
Like regular useState but with mediation by custom function
useFirstMountState
Check if current render is first
useRendersCount
Count component renders
useMethods
Neat alternative to useReducer
Miscellaneous
Topic
Description
Reference
useEnsuredForwardedRef
Use a React.forwardedRef safely