Skip to main content
ELYTE
MediumFrontendBuild

Debounced Search with Stale Response Protection

Implement a debounced search component in React + TypeScript. You are given `search(query: string): Promise<Result[]>` (where `Result = { id: string; label: string }`) and a `debounceMs` prop. Render `data-testid="searc...

Start problemBrowse all problems

What you will practice

TypeScriptReactReact PatternsAsync PatternsAsync State

Requirements

  • Keep `App` as the default exported React component with `search` and `debounceMs` props.
  • Render `search-input`, `results`, and one `result-item` per visible result.
  • Do not call `search` until the user has stopped typing for `debounceMs`.
  • The initial results area must be empty.
  • If responses resolve out of order, render only the latest query result.
  • Earlier in-flight responses must not overwrite newer results.

Starter files

App.tsxEditable starter

What the judge checks

  • Runs in the react environment with the react-testing-library runner.
  • Uses a 2500ms judge budget.
  • Requires test IDs: search-input, results.
  • Checks repeated UI regions: result-item.
  • Provides APIs: search.
  • Behavior rules include: Initial Empty Results, Debounce Required, Stale Responses Must Not Overwrite.

Constraints

  • search may resolve in any order — stale results must never overwrite newer ones
  • 0 <= debounceMs <= 2000

Example behavior

Input
debounceMs = 200
User types "c" then quickly "ca"
search("c") resolves after search("ca")
Output
Rendered results reflect the "ca" response only

Follow-up

Can you avoid calling search when the trimmed query is empty, while keeping the same UI behavior?