Debug a Frontend Component That Shows Wrong API Results

A front-end component sends an API request whenever its input changes and displays the response. Users report that the results on screen are sometimes wrong: they do not match what is currently typed. Yet when each request is checked on its own, the API returns the correct data for that request. Find out why the component shows wrong results, fix it, and explain how you would confirm the fix.

The interview's actual code was not reported. The React component below is a representative reconstruction to debug.

import { useEffect, useState } from "react";

type Result = { id: string; name: string };

export function SearchResults() {
 const [query, setQuery] = useState("");
 const [results, setResults] = useState<Result[]>([]);
 const [error, setError] = useState<string | null>(null);

 useEffect(() => {
 if (!query) {
 setResults([]);
 return;
 }
 fetch(`/api/search?q=${encodeURIComponent(query)}`)
 .then(res => res.json())
 .then(data => setResults(data.results))
 .catch(() => setError("Search failed"));
 }, [query]);

 return (
 <div>
 <input value={query} onChange={e => setQuery(e.target.value)} />
 {error && <p>{error}</p>}
 <ul>
 {results.map(r => (
 <li key={r.id}>{r.name}</li>
 ))}
 </ul>
 </div>
 );
}

Constraints and Clarifications

• The endpoint is correct for every individual request; the problem is in the client.
• When typing stops, the screen must end up showing the results for the final input, and it must never switch to results for an earlier input. Keeping the previous results visible while new ones load is acceptable.
• The fix should use standard browser APIs and must not add unnecessary network traffic.

Clarifying Questions

• Can the backend be changed, for example to return the query it answered?
• Is it acceptable to wait until typing pauses before searching, or must results follow each keystroke?
• Should the user ever see an error for a request whose results are no longer needed?