Why debounce AI API calls?

AI calls are slow and cost money per request. Firing one on every keystroke sends dozens of requests for a single question and wastes tokens. Debouncing waits until the user pauses, so you send one request with the final input.

What debounce delay should I use?

For chat or search inputs, 300 to 500 ms feels responsive while skipping mid-word typing. Shorter delays fire too often; longer ones feel laggy. Tune it to your input and test with a fast typist.

Debounce or throttle for AI calls?

Debounce. Throttle fires at a steady rate during continuous input, which suits scroll or resize. For a user finishing a thought before you call the model, you want to wait for the pause, which is debounce.

Build / Code / React

Debouncing AI Calls

Wait for the user to stop typing before calling the AI, so you fire one request instead of dozens.

TL;DR

Wait until typing pauses before firing the request.
Skip empty, short, or unchanged input values.
Combine debounce with cancellation to drop stale calls.

Jump to section

Debounce the Input
A useDebounce Hook
Skip Wasteful Calls
Trigger the Call
Tips
Warnings
In Practice
FAQ

Debounce the Input

Set a Timer

Wait a beat after the last keystroke.

const id = setTimeout(() =>
  setDebounced(value), 400);

Clear on Change

Cancel the pending timer each keystroke.

return () => clearTimeout(id);

Use the Delayed Value

Act on the settled value, not the raw one.

useEffect(() => { ask(debounced); },
  [debounced]);

A useDebounce Hook

Reusable Hook

Wrap the pattern for any value.

function useDebounce(v, ms = 400) {
  const [d, setD] = useState(v);

Effect and Timer

Update the value after the delay passes.

useEffect(() => {
  const id = setTimeout(() => setD(v), ms);
  return () => clearTimeout(id);
}, [v, ms]);

Return the Value

Give back the debounced value.

return d;

Skip Wasteful Calls

Minimum Length

Ignore inputs too short to be useful.

if (query.trim().length < 3) return;

Skip Unchanged

Do not re-ask the same question.

if (query === lastRef.current) return;

Guard Empty

Never call the AI with a blank prompt.

if (!query.trim()) return;

Trigger the Call

Fire on Settle

Call the AI when the debounced value changes.

useEffect(() => { run(debounced); },
  [debounced]);

Pair With Abort

Cancel any earlier request first.

controllerRef.current?.abort();

One Request

A whole sentence becomes a single call.

// dozens of keystrokes -> 1 request

Tips

Debounce around 300 to 500 milliseconds for chat inputs; short enough to feel instant, long enough to skip mid-word keystrokes.
Store the debounced value in state with a useEffect timeout, then trigger the AI call from that value, not the raw input.

Warnings

Do not call the AI on every onChange; a fast typist can fire dozens of paid requests for a single question.
Clear the previous timeout on each keystroke, or overlapping timers will fire several requests at once.

In Practice

A search box that asks the AI once after the user stops typing, not on every key.

useDebounce delays the query until typing pauses for 400 ms.
The effect runs only when the debounced value changes.
A length guard skips tiny inputs that would waste a request.
One settled query triggers exactly one AI call.

function Search() {
  const [q, setQ] = useState('');
  const debounced = useDebounce(q, 400);
  const [answer, setAnswer] = useState('');
  useEffect(() => {
    if (debounced.trim().length < 3) return;
    fetch('/api/chat', {
      method: 'POST',
      body: JSON.stringify({ q: debounced }),
    })
      .then((r) => r.json())
      .then((d) => setAnswer(d.text));
  }, [debounced]);
  return <input value={q}
    onChange={(e) => setQ(e.target.value)} />;
}