useDebounceCallback

A debounced function with cancel and flush.

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

Runs the latest callback once, delay ms after the last call, with the latest arguments: autosave, search requests and resize work. Pending work is cancelled on unmount.

Usage

import { useDebounceCallback } from '@gaudi/design-system/hooks';
const save = useDebounceCallback((text) => saveDraft(text), 800);<Textarea onChange={(event) => save(event.target.value)} onBlur={save.flush} />

Examples

Autosave a draft

Storybook

API

2 options

2 return values

Accessibility

For autosave, show and announce the saved state once the debounced save finishes, and flush on blur so work is not lost.

Notes

createDebouncer(callback, delay) is exported for non-React code.

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.useDebounceValueA value that updates only after it stops changing.useDisclosureOpen, close and toggle state for overlays and disclosures.