Async Race Conditions and Stale UI Updates

HighIntermediateJavascript

By FrontendAtlas Team · Updated Apr 4, 2026

Quick Answer

Debug the production bug where async requests resolve out of order and overwrite newer UI state. The fix is cancellation, request identity, or takeLatest-style guards that stop stale results from winning.

Answer

The core issue

This is a classic production debug problem in search, filters, and autosave flows. Request A starts, then request B starts, B finishes first, and the UI briefly looks correct. When A finishes later, it overwrites newer state with stale data unless your code cancels or guards the older request.

Step	What happens
User types 'rea'	Request A is sent
User types 'react'	Request B is sent
Request B returns first	UI shows results for 'react'
Request A returns later	UI is overwritten with stale 'rea' results

Classic search-as-you-type race condition.

How to prevent it

You need either real cancellation or a stale-result guard. Both prevent old responses from winning the race.

Technique	How it works	Notes
AbortController	Cancel the previous request so it never resolves	Best when the API supports AbortSignal (e.g., fetch)
Request id guard	Only apply results if the id matches the latest	Works even if the API cannot be cancelled
takeLatest / switchMap	Wrap calls to auto-cancel or ignore stale results	Common in RxJS or custom utilities

Three reliable ways to avoid stale updates.

JAVASCRIPT

let requestId = 0;

async function search(query) {
  const id = ++requestId;
  const res = await fetch(`/api?q=${query}`);
  const data = await res.json();
  if (id !== requestId) return; // stale result
  render(data);
}

JAVASCRIPT

let controller;

async function search(query) {
  if (controller) controller.abort();
  controller = new AbortController();
  const res = await fetch(`/api?q=${query}`, { signal: controller.signal });
  const data = await res.json();
  render(data);
}

Pitfalls

Promise.race does not cancel the losing promises.

Debounce reduces request count but does not prevent out-of-order responses.

Always clean up abort listeners or timers to avoid leaks.