All visualizationsReact · 5 of 18
The fetch race — when the wrong results win
Two requests, one screen: watch the stale response overwrite the fresh one, then fix it with a one-integer ticket check.
💡
THE BIG IDEA
You type "maths", retype "physics", and the screen shows maths results under a physics search box. Nobody wrote a bug on purpose — two honest requests just landed in the wrong order. We run the race for real (deterministic slow and fast networks), watch the stale response win, then give every request a numbered ticket and watch the same race become harmless. The fix is exactly React’s useEffect ignore-flag pattern.
Move your mouse over any line to see what it does. Hover a loop line and it plays through every repeat. Or press ▶ Play to watch the whole thing. On a phone, tap the arrows.
1const wait = (ms) => new Promise((r) => setTimeout(r, ms));
2let screen = "", latest = 0;
3async function search(query, delay, safe) {
4 const id = ++latest;
5 await wait(delay);
6 if (safe && id !== latest) { console.log("(stale", query, "ignored)"); return; }
7 screen = "results for " + query;
8 console.log("screen shows:", screen);
9}
10async function main() {
11 search("maths", 200, false);
12 search("physics", 50, false);
13 await wait(250);
14 console.log("BUG: box says physics, screen:", screen);
15 search("maths", 200, true);
16 search("physics", 50, true);
17 await wait(250);
18 console.log("FIXED: box says physics, screen:", screen);
19}
20main();
A search box. You type "maths", then quickly retype "physics". The box says physics — but the results on screen are for MATHS. Every search UI ever built has shipped this bug at least once.
It is a RACE: two network requests in flight, and the screen belongs to whichever lands LAST — not whichever was asked for last. We run the crime, then fix it the way React’s own docs do.
📦 Memory boxes
what the program is remembering right now
nothing remembered yet
🖥️ What the computer shows
the answers the program prints out
nothing yet
1/13
UP NEXT IN REACT
The fetching state machine — and the fifth state everyone forgets
loading, error with a retry loop, success with data — and success with NOTHING, which deserves its own screen.
Custom hooks — a recipe, never a shared potThe fetching state machine — and the fifth state everyone forgets