debbl 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
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.
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 |