Summary
Out-of-order async responses show stale data if last-write-wins without request identity. Abort prior fetch on new input; track request ID and ignore stale responses. Strict Mode double-mount exposes missing cleanup. Optimistic updates need rollback on failure (see 4.8).
Code example
useEffect(() => {
const controller = new AbortController();
let requestId = ++latestId.current;
fetch(`/search?q=${query}`, { signal: controller.signal })
.then((r) => r.json())
.then((data) => {
if (requestId === latestId.current) setResults(data);
})
.catch((err) => {
if (err.name !== 'AbortError') setError(err);
});
return () => controller.abort();
}, [query]);
Key points
- Out-of-order async responses show stale data if last-write-wins without request identity.
- Abort prior fetch on new input; track request ID and ignore stale responses.
- Strict Mode double-mount exposes missing cleanup.
- Optimistic updates need rollback on failure (see 4.8).