Stop Rebuilding UI

Shadcn.io is not affiliated with official shadcn/ui

Previous: useDebounceCallback
Next: useDocumentTitle

React useDebounceValue Hook

React useDebounceValue hook for debouncing state changes. Returns debounced value with cancel/flush controls. TypeScript ready.

Debounce any React state value without extra boilerplate. useDebounceValue takes an initial value and delay, returns the debounced value plus an updater with cancel and flush controls. Value updates only after the delay passes with no new changes. Custom equality function supported. Perfect for search inputs, filter controls, URL sync, or any UI where you need to wait for user to stop typing before reacting. Works with Next.js App Router and SSR. Use useDebounceCallback if you need to debounce a function instead of a value.

React useDebounceValue Hook preview

Scroll to load preview

Installation

React useDebounceCallback Hook

Debounce function calls

React useThrottle Hook

Throttle rapid updates

React useLocalStorage Hook

Persist state to localStorage

React useTimeout Hook

Declarative setTimeout management

React useEventCallback Hook

Stable callback reference

React useMediaQuery Hook

Respond to CSS media queries

FAQ

Was this page helpful?

Sign in to leave feedback.

useDebounceCallback

React useDebounceCallback hook with cancel, flush, and isPending controls. Lodash debounce under the hood. TypeScript ready.

useDocumentTitle

React useDocumentTitle hook to update browser tab title dynamically. SSR safe, TypeScript ready, works with Next.js App Router.