shadcn-hooks

shadcn-hooks

This skill is a decision-and-implementation guide for shadcn-hooks in React projects. It maps requirements to the most suitable 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 / Next.js.
• Always check first whether a shadcn-hooks function can fulfill the requirement.
• Prefer shadcn-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 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.

Installation

Prefer the shadcn CLI — it copies only the hooks you need into your project (zero extra runtime dependencies, tree-shake friendly):

# Install a single hook (recommended)
npx shadcn@latest add @shadcnhooks/use-boolean

# Install multiple hooks at once
npx shadcn@latest add @shadcnhooks/use-boolean @shadcnhooks/use-mount @shadcnhooks/use-debounce

Alternatively, install the full npm package (all hooks bundled):

npm install shadcn-hooks

When using the shadcn CLI, import from the local path (e.g. import { useBoolean } from "@/hooks/use-boolean"). When using the npm package, import from "shadcn-hooks" (e.g. import { useBoolean } from "shadcn-hooks").

Functions

All functions listed below are part of shadcn-hooks. 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.

State

Function	Description	Invocation
useBoolean	Boolean state with set, setTrue, setFalse, toggle helpers	AUTO
useControllableValue	Supports both controlled and uncontrolled component patterns	AUTO
useCounter	Counter with inc, dec, set, reset helpers	AUTO
useDebounce	Debounced reactive value	AUTO
useResetState	State with a reset function to restore the initial value	AUTO
useThrottle	Throttled reactive value	AUTO
useToggle	Toggle between two values with utility actions	AUTO

Advanced

Function	Description	Invocation
useCreation	Memoized factory with deep dependency comparison	AUTO
useCustomCompareEffect	useEffect with a custom dependency comparator	AUTO
useLatest	Ref that always holds the latest value	AUTO
useLockFn	Prevents concurrent execution of an async function	AUTO
useMemoizedFn	Stable function reference that never changes identity	AUTO
usePrevious	Returns the previous value of a state	AUTO

Lifecycle

Function	Description	Invocation
useDebounceEffect	Debounced useEffect	AUTO
useDebounceFn	Debounced function with run, cancel, flush controls	AUTO
useDeepCompareEffect	useEffect with deep dependency comparison	AUTO
useDeepCompareLayoutEffect	useLayoutEffect with deep dependency comparison	AUTO
useEffectEvent	Ponyfill for React 19's useEffectEvent	AUTO
useEffectWithTarget	useEffect that supports target DOM element(s) as dependencies	AUTO
useInterval	Interval timer with auto-cleanup	AUTO
useIsHydrated	Returns true after client hydration completes	AUTO
useIsomorphicLayoutEffect	useLayoutEffect on client, useEffect on server	AUTO
useMount	Runs a callback only on component mount	AUTO
useThrottleEffect	Throttled useEffect	AUTO
useThrottleFn	Throttled function with run, cancel, flush controls	AUTO
useTimeout	Timeout timer with auto-cleanup	AUTO
useUnmount	Runs cleanup on component unmount	AUTO
useUpdate	Returns a function that forces component re-render	AUTO
useUpdateEffect	useEffect that skips the first render	AUTO

Browser

Function	Description	Invocation
useActiveElement	Track the currently focused element	AUTO
useBattery	Reactive battery level and charging information	AUTO
useClickAnyWhere	Listen to click events anywhere on the document	AUTO
useClickAway	Detect clicks outside of target element(s)	AUTO
useClipboard	Reactive Clipboard API with read/write support	AUTO
useDocumentVisibility	Reactive document visibility state	AUTO
useElementSize	Reactive element size via ResizeObserver	AUTO
useEventListener	Declarative event listener with auto-cleanup	AUTO
useFps	Reactive FPS (frames per second) measurement	AUTO
useFullscreen	Reactive Fullscreen API	AUTO
useHash	Reactive window.location.hash	AUTO
useHover	Reactive hover state of an element	AUTO
useInViewport	Track element visibility via IntersectionObserver	AUTO
useIsMatchMedia	Reactive CSS media query matching	AUTO
useIsOnline	Reactive online/offline network status	AUTO
useMouse	Reactive pointer coordinates for mouse/touch	AUTO
useNetwork	Reactive network connection information	AUTO
useOs	Reactive browser operating system detection	AUTO
useScrollLock	Lock/unlock scroll on a target element	AUTO
useTextSelection	Reactive text selection state with bounding rect	AUTO
useTitle	Reactive document title management	AUTO

Dev

Function	Description	Invocation
useWhyDidYouUpdate	Logs which props changed between renders (debug only)	AUTO

External

Function	Description	Invocation
useMcp	Model Context Protocol client hook from use-mcp	EXTERNAL
useQuery	Data fetching hook from @tanstack/react-query	EXTERNAL
useStickToBottom	Scroll-stick behavior from use-stick-to-bottom	EXTERNAL
useSWR	Data fetching hook from swr	EXTERNAL