How to perform debouncing in React?

Question

How to perform debouncing in React?

Answer

You can debounce API calls or logic using setTimeout inside useEffect.

import { useState, useEffect } from 'react';

function SearchBox() {
  const [query, setQuery] = useState('');

  useEffect(() => {
    const timer = setTimeout(() => {
      if (query) {
        console.log('Searching for:', query);
      }
    }, 500);

    return () => clearTimeout(timer);
  }, [query]);

  return (
    <input
      placeholder='Search...'
      value={query}
      onChange={(e) => setQuery(e.target.value)}
    />
  );
}

✅ This waits 500 ms after the last keystroke before running the effect.

Real-World Example

• Search bar API calls
• Auto-save in forms
• Live validation with delay

Quick Practice

Build a “Search Users” input that logs results only after typing pauses for half a second.

Summary

Use useEffect + setTimeout + cleanup to create smooth debounced interactions in React.