Typeahead With Keyboard Navigation

A city search that queries as you type once at least three characters are entered, with arrow keys to move through results and Enter to select.

The search function here has deliberately variable latency, and that is the point. Most candidates debounce, see a working search, and stop — but with a debounce alone a slow request for lon can resolve after a fast one for lond and replace the correct results with stale ones. It is a real production bug, it is invisible on a fast connection, and it is exactly why this gets asked.

So two mechanisms are doing two jobs. The timer reduces how many requests you make. An AbortController makes sure a request whose query is no longer current cannot affect state at all. Both are undone in the same effect cleanup, which is what makes the pairing natural: React tears down the previous effect before running the next, so "cancel whatever the last keystroke started" needs no extra bookkeeping.

The alternative to aborting is a staleness guard — capture the query, compare it on resolve before calling setState. It works, and it is the right answer where cancellation is not available. Aborting is better where it is, because it stops the work rather than discarding it.

The subtle one is the selection loop: writing the chosen value into the input changes the query, so the effect reruns and reopens the dropdown over the choice just made. A ref checked at the top of the effect breaks the cycle.