LLM Best Practices

Debouncing

2 min read

View markdown source

Overview

This page is the atomic definition. React hook patterns for debouncing live at react.

Definition

Debouncing is a technique that delays invoking a function until a specified amount of time has passed since the most recent call. Every new call resets the timer. If calls keep arriving faster than the timeout, the function never runs. Only when calls stop for the full duration does the function execute once. This is the correct pattern for search-as-you-type inputs: the API call fires only after the user pauses typing, not on every keystroke. Compare with throttling, which guarantees execution at most once per interval regardless of call frequency. The classic implementation uses setTimeout and clearTimeout. Libraries like lodash provide _.debounce(fn, ms). In React, debounced functions should be memoized with useCallback and the memoized reference should be cleaned up in a useEffect return to cancel pending timers on unmount. Debouncing improves inp scores by reducing the number of expensive computations triggered by user input, and reduces API costs by cutting request volume.

When it applies

Use debouncing for: search inputs, autocomplete, form validation on change, resize handlers, and any event that fires continuously during user interaction but where only the final state matters. Prefer throttling when you need regular intermediate updates, such as scroll position tracking.

Example

function useDebounce(value, delay) {
  const [debounced, setDebounced] = useState(value);
  useEffect(() => {
    const timer = setTimeout(() => setDebounced(value), delay);
    return () => clearTimeout(timer);
  }, [value, delay]);
  return debounced;
}
// In component: const query = useDebounce(inputValue, 300);
// API call fires 300 ms after user stops typing.
  • throttling - limits execution rate to once per interval; keeps firing at regular intervals.
  • react - React hooks make debouncing composable via useDebounce custom hooks.
  • inp - reducing unnecessary rerender calls from rapid events improves INP.
  • virtual-dom - debouncing reduces the frequency of reconciliation cycles.

Citing this term

See Debouncing (llmbestpractices.com/glossary/debouncing).

Graph View

Backlinks