How do you cancel old API calls using the take latest pattern in React?

Network latency is non-deterministic. If you fire q=re, q=react, q=react\u00a0native in quick succession, the response for q=re may arrive last and overwrite the correct results. The fix is take-latest: ensure only the response for the most recent request can update state.

Approach 1 — AbortController (preferred).

useEffect(() => {
  const ctrl = new AbortController();
  fetch(`/search?q=${query}`, { signal: ctrl.signal })
    .then(r => r.json())
    .then(setResults)
    .catch(e => { if (e.name !== "AbortError") throw e; });
  return () => ctrl.abort();
}, [query]);

Cleanup runs before the next effect, so the previous request is aborted before the new one starts. The browser cancels the underlying network call — saves bandwidth and server work, not just client logic. Always swallow AbortError; it's not a real error.

Approach 2 — request-id ref (when you can't abort).

const reqIdRef = useRef(0);

async function search(q: string) {
  const id = ++reqIdRef.current;
  const res = await fetch(`/search?q=${q}`).then(r => r.json());
  if (id !== reqIdRef.current) return; // stale — newer request is in flight
  setResults(res);
}

Use this when the API can't be aborted (e.g., GraphQL client without cancellation, or a Promise-based SDK).

The senior detail: aborting doesn't stop server-side work. AbortController closes the TCP connection but the server may still execute the query. For expensive endpoints, idempotency keys + server-side debounce matter. Frontend take-latest is a UX fix, not a backend protection.

Combine with debounce. Debounce reduces the number of requests; take-latest handles the ones that still race. They're complementary, not substitutes — debounce alone doesn't save you if one slow request lands after a fast one.

RTK Query / TanStack Query do this for you. Both use the query key as identity; switching keys cancels (or invalidates) the previous. If you're hand-rolling fetches in 2026, prefer one of these — AbortController + ref bookkeeping is exactly what they internalize.