Fix search results that show an older request after a newer one

A reader types two searches quickly. The second request finishes first, but the slower first request later overwrites the correct results.

Why this happens

Network responses do not necessarily arrive in the order requests were started. A component that accepts every response can display stale data.

Step-by-step solution

1. Reproduce the race with throttled or deliberately delayed responses. Log request identifiers rather than guessing from visual timing.

2. Abort superseded requests when supported, or compare a request version before applying results. Keep the loading state tied to the current request.

3. Treat an intentional cancellation differently from a real error. Debouncing can reduce requests, but does not itself guarantee correct response ordering.

Worked example

const controller = new AbortController();
fetch('/api/search?q=example', { signal: controller.signal });
// When this request becomes obsolete:
controller.abort();

Verify the fix

Delay the first response and allow the second to finish immediately. The final interface must show the second query’s results and must not display a cancellation as a user-facing failure.

Prevent a repeat

Centralise request lifecycle handling and test rapid navigation. Use cache keys that include every input affecting the response.

Reference

Official documentation or standards guidance

An original Gistmax troubleshooting guide. Scenarios and sample values are illustrative; configuration depends on your software version and environment. Cover diagram: Gistmax Tutorials.