Examples

useDebouncedValue

A small hook that returns a debounced copy of a value — useful for deferring expensive work until the input has settled.

Live search

Type in the field below — the filtered list only updates after you pause typing for the configured delay.

ms
raw: (empty)debounced: (empty)matches: 15
  • Aurora workspace
  • Atlas workspace
  • Beacon workspace
  • Cascade workspace
  • Cinder workspace
  • Delta workspace
  • Echo workspace
  • Granite workspace
  • Halo workspace
  • Helix workspace
  • Marble workspace
  • Nimbus workspace
  • Quartz workspace
  • Sable workspace
  • Tempest workspace

How it works

Each render schedules a timer that copies the latest value into state after the configured delay; the cleanup clears the previous timer on every change.

  1. The user types into the controlled input.
  2. useDebouncedValue captures the latest value without committing it yet.
  3. After {delay}ms without changes, the debounced value updates.
  4. The filtered list re-renders once per pause — never per keystroke.