useDebounce Debounce Hook
Last updated: 2026-11-02
useDebounce Debounce Hook
useDebounce takes a value that changes rapidly, such as the text of a search box, and returns a stable version of it only after N milliseconds: if the value changes again in the meantime, the timer restarts. Driving your requests with it removes a large amount of pointless work, which makes it a staple for search, autocomplete and resize handling. The value it returns lags behind by design, and that lag is exactly what filters out the intermediate keystrokes.
| Group | Component Patterns |
|---|---|
| Kind | Hook |
| Since | React 16.8 |
ℹ️ Info The editor transpiles JSX to JavaScript and renders the real UI in a sandbox; components mount automatically — no manual render call needed.
📝 Syntax
function useDebounce(value, delay = 300) {
const [debounced, setDebounced] = useState(value)
useEffect(() => {
const t = setTimeout(() => setDebounced(value), delay)
return () => clearTimeout(t) // the value changed again: drop the old timer
}, [value, delay])
return debounced
}⚙️ Parameters
| value | The raw value to debounce, usually the state of a controlled input. |
|---|---|
| delay | The debounce delay in milliseconds, 300 by default. The new value is only returned after the value has been quiet for that long. |
Returns：Returns the delayed, stable value: it stays unchanged while the raw value keeps changing and only catches up after a pause.
▶ Example
The example runs out of the box: it auto-renders when expanded, and edits take effect instantly.
Output：
While you type quickly the "Debounced" line stands still and only catches up half a second after you stop — a request driven by it fires once, with the final value.💡 Key Points
🏷️ More Component Patterns
💡 Related Cases
📚 Related Tutorials
❓ FAQ
