The out-of-order bug and the ignore flag fix
Both panels show AB first. Then the slow answer for "a" arrives: the unprotected panel shows A results under the query ab; the safe panel drops it. Type in the box yourself: one letter, then a second letter quickly.
Responses can arrive out of order, so ignore or abort stale requests; share one request between components that need the same data (deduplication); and show cached data at once while refreshing it in the background (stale-while-revalidate). Building a tiny cache shows how data libraries work inside.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 6 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write a latestOnly(fn) helper that wraps an async function so only the most recent call's result is delivered (older calls resolve to undefined).
Add a 5-second timeout to a fetch in an effect that's also cancelled on unmount.
Extend the tiny cache with an invalidate(key) function that marks the entry stale and refetches it if any component is subscribed.
Explain it without notes
What is a race condition in data fetching, and how do you reproduce one?
Compare the ignore flag and AbortController. When would you use each?
What is request deduplication and how would you implement it?
Explain stale-while-revalidate and what staleTime adds to it.
Preview
Console
Nothing logged yet.Expected console output
after AB answered: No protection: AB results | With ignore flag: AB results
safe: ignored the late answer for "a"
after A answered: No protection: A results | With ignore flag: AB results