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 code from the actual interview 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 you may raise

• 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?

Follow-up questions

1. Would waiting for a pause in typing before searching fix the problem on its own? Why or why not?
2. How would you write an automated test that reproduces this bug deterministically, without relying on real network timing?
3. Does your fix reduce the work the server does, or does it only change what the client displays?
4. How would the same fix look outside React, for example in a plain class that wraps a search input?