When arrival order lies: enforcing latest intent

Break it: out-of-order responses overwrite UI

Type quickly to create overlapping requests. Requests complete with variable latency. Sometimes an older response arrives last and overwrites the latest intent.

—

—

fakeSearch(query).then((res) => {
  setResults(res); // ❌ commits whichever response arrives last
});

Why this breaks

Reference (correct mental model)

// ❌ "latest arrival wins"
fakeSearch(query).then(setResults);

// ✅ "latest intent wins"
startRequest();
ignoreOrCancelOlder();

Fix

Minimal reliable fix: assign each request an incrementing id and only apply the result if it matches the latest request.

—

—

const id = ++requestIdRef.current;

fakeSearch(query).then((res) => {
  if (id !== requestIdRef.current) return; // ✅ ignore stale response
  setResults(res);
});

Optional

Instead of only ignoring stale responses, you can cancel old requests. With real fetch, pass signal.

—

—

abortRef.current?.abort();
const controller = new AbortController();
abortRef.current = controller;

fetch(url, { signal: controller.signal })
  .then(r => r.json())
  .then(setResults)
  .catch(err => {
    if (err.name === "AbortError") return;
    throw err;
  });

Key takeaways

• Overlapping requests can finish out of order.
• UI should reflect latest intent, not latest arrival.
• Fix with gate (requestId) or cancel (AbortController).

Approach & tradeoffs