useDebounceValue

A value that updates only after it stops changing.

HooksState@gaudi/design-system/hooks/state/use-debounce-valueView in Storybook Source

Delays a fast-changing value, such as a search query, until it has been still for the delay, so filtering and requests do not run on every keystroke.

Usage

import { useDebounceValue } from '@gaudi/design-system/hooks';
const debouncedQuery = useDebounceValue(query, 300);const results = useMemo(() => search(debouncedQuery), [debouncedQuery]);

Examples

Filter after typing settles

Storybook

API

2 options

1 return value

Accessibility

Announce result counts after the debounced update, not per keystroke, so screen readers are not flooded.

Notes

Use useDebounceCallback when you need cancel or flush.

useDebounceCallbackA debounced function with cancel and flush.useBooleanGeneric boolean state with stable toggle, enable and disable actions.useControllableStateState that works controlled or uncontrolled, like native inputs.useCountdownA pausable countdown or count-up that stops at its target.useCounterA number with increment, decrement, set and reset actions.useDisclosureOpen, close and toggle state for overlays and disclosures.