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):

bash

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

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

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

bash

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
`useNetwork`	Reactive network connection information	AUTO
`useScrollLock`	Lock/unlock scroll on a target element	AUTO
`useTextSelection`	Reactive text selection state with bounding rect	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

shadcn-hooks

NPX Install

Tags

SKILL.md Content

shadcn-hooks

When to Apply

Installation

Functions

State

Advanced

Lifecycle

Browser

Dev

External