How do you avoid showing the response to an older search?
Answer out loud or in your head first, then compare.
Answer
I treat every search as a separate request. When the user types a new phrase, an earlier response must no longer overwrite the new one. I can try to cancel the previous read and also check whether the result still belongs to the current request.
Example: the result for “re” arrived after the result for “react”. I should still show “react”. Delaying the sending of queries, i.e. debounce, limits their number but doesn't guarantee the order of responses. The test should deliberately finish the second request before the first. The same way, I guard against an old request's error hiding a newer success.
Why it matters: A very realistic fix in a short React task.
Possible follow-ups: What about after the component unmounts? Does the HTTP client always honour cancellation?
How did it go? Be honest — “Not yet” puts the question on your review list.
Start with
- C-P01 · What is React, and what is a component? — React, Next.js and frontend
- C-P02 · How do props and state differ? — React, Next.js and frontend
- C-P04 · What is useEffect for, and what does the dependency array mean? — React, Next.js and frontend
Related questions
Practise in code
- A search that shows a stale result — runs tests in your browser
Further reading
- React: Synchronizing with Effects(opens in a new tab)Docs; accessed 22.10.2026. What Effects are for, cleanup, and protecting against stale results.