This search box fires a (simulated) request every time the query changes. The problem: the API responds faster for short queries and slower for long ones. If you type react and then quickly delete down to r, the response for r arrives first, then the older react response lands on top of it — showing stale results.
Symptoms
- Latest query in the input, stale results on screen
- The bug is timing-dependent — it surfaces when responses arrive out of order
Your Task
Make sure only the latest request's result is written to state. Older in-flight requests should be ignored when they finally resolve.
Think about it: the effect cleanup runs before the next effect and on unmount. What state can you flip in cleanup to make the older then a no-op?