Build a debounced Search Bar | Interview Question

Q: Build a debounced Search Bar

**Target Audience:** Frontend developers preparing for a machine coding round. Assumes basic React (components, `useState`), nothing about debouncing or request cancellation. **Difficulty:** Medium > **How to read this doc:** Every idea is explained in plain language first, then tagged with 📌 Interview term: so you also learn the exact words an interviewer listens for. The output in the Verified section was produced by actually running the solution on React 19.3.1 in jsdom with a scripted driver. The "server" is simulated in the file: there is no network. ## 1. Why This Even Matters — A Story First Imagine a librarian behind a desk. You walk up and start spelling a book title: "J... A... V...". A bad librarian runs to the shelves after every single letter, comes back with the wrong books, and runs off again. A good librarian waits until you stop talking for a moment, then goes once. There is a second, sneakier problem. Suppose you said "JA", paused, and the librarian

The problem

Question presented to candidate: "Build a search box for our book catalog. It should not hit the server on every keystroke: wait until the user pauses for about 300 ms, then search. If an older request is still running when a newer one starts, cancel it so stale results can never show up. Show a loading state, an empty state and an error state."

Requirements:

One text input with a label and a clear (×) button.
Fire the search 300 ms after the last keystroke (debounce), never once per key.
Cancel the previous in-flight request when a new search starts, and cancel everything on unmount (no late state updates).
Show "waiting", "searching", results, "no results" and error states; keep the previous results visible (dimmed) while the next request runs.
The server can be simulated with a Promise and setTimeout.

What a strong answer should cover:

Debounce as "reset a timer on every change, fire when it survives", implemented as a reusable hook / composable / RxJS operator, with the timer cleared on unmount.
Separating the raw input value (updates every keystroke) from the debounced term (drives the request).
AbortController passed to the request, aborted in the effect cleanup, and an AbortError treated as "not an error".
Why debounce alone does not prevent stale results: requests can still finish out of order.
Loading / empty / error states and an accessible status message (role="status").
How to test it: fake timers, or driving real time in small steps.

Clarifying questions expected:

"How long should the debounce be, and should an empty box clear the results immediately?"
"Does the API accept an abort signal, or do I need to ignore stale responses myself?"
"Should results update while typing (search-as-you-type) or only on submit?"

Code / implementation expected: Yes. A working component with a debounce helper, an aborted fetch per new term and the loading / empty / error states.

React
Performance
Debounce

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Frontend developers preparing for a machine coding round. Assumes basic React (components, useState), nothing about debouncing or request cancellation. Difficulty: Medium

How to read this doc: Every idea is explained in plain language first, then tagged with 📌 Interview term: so you also learn the exact words an interviewer listens for. The output in the Verified section was produced by actually running the solution on React 19.3.1 in jsdom with a scripted driver. The "server" is simulated in the file: there is no network.

1. Why This Even Matters — A Story First

Imagine a librarian behind a desk. You walk up and start spelling a book title: "J... A... V...". A bad librarian runs to the shelves after every single letter, comes back with the wrong books, and runs off again. A good librarian waits until you stop talking for a moment, then goes once.

The solution is hidden so you can try first

12 min read · 9 sections

React solution

Every file of the working solution. Open it in the playground to run and change it.

ReactComplete solution

Open in playground

import SearchBar from "./src/components/SearchBar";

export default function App() {
  return (
    <main className="page">
      <h1>Book search</h1>
      <SearchBar />
    </main>
  );
}

Discussion

Other approaches, follow-ups and how it went in real interviews.

Sign in to join the discussion.

No comments yet. Share how you would answer it.

The solution is hidden so you can try first

Keep your momentum going.