src/components/DebouncedInput/DebouncedInput.tsx

A debounced input element. Has all standard input props, with the following exceptions:

  • value is always a string
  • onChange takes in a string, not an event arg
  • debounceDelayMs specifies the delay in milliseconds to wait before calling the external onChange (default: 300)

test
src/components/Debouncer/Debouncer.tsx

Wrap your components in Debouncer to debounce external change events while still showing the most up-to-date value possible in the UI (even if that value is not yet tracked by your external state management). This is useful for preventing spawning many API calls per-keystroke, or for preventing potentially costly Redux updates.

Usage with render


Current internal value: test
Current external value: test
Count `onChange` called: 0

React Debouncer Style Guide