Handle Race Conditions in Async JavaScript Calls

Scenario

You fetch user details and posts at the same time:

getUser();
getPosts();

Sometimes, getPosts finishes first and updates the UI before user data is ready.

Problem

This causes inconsistent UI — data mismatch or flickering.

Solution 1: Synchronize with Promise.all

const [user, posts] = await Promise.all([getUser(), getPosts()]);
updateUI({ user, posts });

✅ Ensures both finish before updating.

Solution 2: Use Tokens for Latest Request (Real-World Pattern)

let currentRequest = 0;

async function fetchData(query) {
  const reqId = ++currentRequest;
  const result = await fetch(`/search?q=${query}`).then((r) => r.json());
  if (reqId === currentRequest) updateUI(result);
}

sequenceDiagram
  participant U as User
  participant R1 as Request #1
  participant R2 as Request #2
  participant UI as Interface

  U->>R1: Start Fetch (A)
  U->>R2: Start Fetch (B)
  R1-->>UI: (Ignored)
  R2-->>UI: (Accepted ✅)

This ensures only the latest fetch updates the UI.

Summary

• Race conditions occur when async tasks resolve out of order
• Fix using:
  • Promise.all for grouped results
  • request versioning for live search
• This is a common interview and real-world async pattern