Describe a race condition in async UI data loading and how you would fix it.

Short Interview Answer

A slower earlier request can overwrite newer results; fix with ignore flags, abort, request IDs, or reducers that drop stale responses.

Detailed Explanation

Example: user types quickly; request for 'ap' returns after 'apple' and paints stale data. Fixes: increment a request generation token and ignore outdated responses; abort previous fetch; debounce input; use libraries with built-in race handling. At architecture level, centralize async state machines (idle/loading/success/error) and make updates idempotent. Tests should simulate out-of-order resolution. This is a common senior frontend interview scenario.

Example

let seq = 0;
async function search(q) {
  const id = ++seq;
  const data = await fetch(`/search?q=${q}`).then((r) => r.json());
  if (id !== seq) return; // stale
  render(data);
}

Interview Tip

Walk through a concrete typing/search example.

Common Mistake

Only debouncing without ignoring in-flight responses — races remain.