Deterministic UI under async

Summary

Async completions arrive out of order — UI must show consistent state (request tokens, latest-wins, merge). Skeleton → content transitions shouldn't flash wrong user's data. Combine with 4.5 Race conditions and 4.9 Deterministic rendering.

Code example

let requestSeq = 0;

async function loadUser(id) {
  const seq = ++requestSeq;
  const user = await fetchUser(id);
  if (seq !== requestSeq) return; // stale response
  setUser(user);
}

Key points

• Async completions arrive out of order — UI must show consistent state (request tokens, latest-wins, merge).
• Skeleton → content transitions shouldn't flash wrong user's data.
• Combine with 4.5 Race conditions and 4.9 Deterministic rendering.

Further reading

• Synchronizing with Effects
• AbortController

Related concepts

• Shared memory models