How do I prevent stale search results?

Definition:

Stale search results occur when requests finish in a different order from the user's inputs. A request for an older search can overwrite newer results unless the component checks which request is still relevant. Debouncing reduces request frequency but does not guarantee completion order.

Key points:

• A slow old request can finish after a newer request.

• Cancel old requests where possible, or ignore results that no longer match the active request.

• Debounce typing if appropriate, but still handle response ordering.

• Track the active request or use cleanup to ignore an old result, and handle aborts differently from genuine user-facing failures.

Step-by-step example:

1. The user searches for rea; request A begins.
2. The user changes the search to react; request B begins.
3. B finishes first, so the page shows results for react.
4. A finishes later; ignore it because it belongs to an older search.
5. Cancel old work when supported, and still protect the state update from stale results.

Interview point:

• Describe the timeline of two searches and show why only the latest relevant response should update state.