---
title: "Debouncing"
slug: "debouncing"
category: "glossary"
tags: ["glossary", "frontend", "javascript", "performance", "events", "ux"]
status: "stable"
last_updated: 2026-05-14
summary: "Debouncing delays a function until a quiet period elapses after the last call, reducing expensive operations triggered by rapid events."
related:
  [
    "[[glossary/throttling]]",
    "[[frontend/react]]",
    "[[glossary/virtual-dom]]",
    "[[glossary/web-vitals]]",
    "[[glossary/inp]]",
  ]
---

## Overview

This page is the atomic definition. React hook patterns for debouncing live at [[frontend/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 [[glossary/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 [[glossary/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 [[glossary/throttling]] when you need regular intermediate updates, such as scroll position tracking.

## Example

```javascript
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.
```

## Related concepts

- [[glossary/throttling]] - limits execution rate to once per interval; keeps firing at regular intervals.
- [[frontend/react]] - React hooks make debouncing composable via `useDebounce` custom hooks.
- [[glossary/inp]] - reducing unnecessary rerender calls from rapid events improves INP.
- [[glossary/virtual-dom]] - debouncing reduces the frequency of reconciliation cycles.

## Citing this term

> See [[glossary/debouncing|Debouncing]] (llmbestpractices.com/glossary/debouncing).

## Related

- [[glossary/throttling]]
- [[frontend/react]]
- [[glossary/virtual-dom]]
- [[glossary/web-vitals]]
- [[glossary/inp]]