"Can't perform a React state update on an unmounted component": the fetch that resolved after navigation

verbatim errorWarning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application.

Problem

A detail page that loads async data: click a result, click back quickly, and the console fills with

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application.

Harmless today (React discards the update), a real leak in Suspense/transition flows, and a broken-UI bug in its worse variants: the stale response does land in a different mounted component with the same state slot.

Root cause

An in-flight promise outlives the component that started it:

useEffect(() => {
  fetchOrder(id).then(setOrder);   // if the user navigates away first, setOrder fires on nothing
}, [id]);

Navigation unmounts the component; the promise resolves anyway. With React 18's automatic batching the warning appears less often than the bug — strict mode double-invocation of effects also surfaces it in dev.

fix preview — first 3 of 10 lines (tsx), truncated:

useEffect(() => {
  const ac = new AbortController();
  fetchOrder(id, ac.signal)
… 7 more lines in the fix

🔒 the fix — including 3 code blocks — is members-only. $1/mo unlocks everything.