Real-Time Search Requires Debouncing Queries and Cancelling Stale Requests

A search-as-you-type feature fires an API request on every keystroke. Responses arrive out of order (a later query resolves before an earlier one) and the UI displays stale results for the current input.

Debounce the search trigger and cancel in-flight requests using AbortController when a new search supersedes them.

import { useEffect, useRef, useState } from 'react';

function useRealtimeSearch(query: string, delay = 300) {
  const [results, setResults] = useState<SearchResult[]>([]);
  const abortRef = useRef<AbortController | null>(null);

  useEffect(() => {
    if (!query.trim()) { setResults([]); return; }

    const timer = setTimeout(async () => {
      // Cancel previous in-flight request
      abortRef.current?.abort();
      abortRef.current = new AbortController();

      try {
        const res = await fetch(`/api/search?q=${encodeURIComponent(query)}`, {
          signal: abortRef.current.signal
        });
        const data = await res.json();
        setResults(data.results);
      } catch (err) {
        if ((err as Error).name !== 'AbortError') throw err;
      }
    }, delay);

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

  return results;
}

Network requests complete in non-deterministic order. Without cancellation, the response to 'ca' may arrive after the response to 'cat', overwriting the correct results. AbortController signals the fetch infrastructure to ignore the earlier response.