Problem 6

Debounced Search with Stale Response Protection

MEDIUMBUILD

React+2

Brief

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="search-input" and data-testid="results" with each result as data-testid="result-item". Only call search after the user has stopped typing for debounceMs. If multiple requests are in flight, only the most recent response may be rendered — earlier responses must be discarded.

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.

Examples

Example 1

Input

debounceMs = 200
User types "c" then quickly "ca"
search("c") resolves after search("ca")

Output

Rendered results reflect the "ca" response only

Constraints

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

Judge checks

react environment
react-testing-library runner
2500ms judge budget

Follow-up

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

Hints

Related Practice

Track

React

Keep moving through related react problems and build a stronger search-friendly practice loop around this topic.

Controlled Form with Validation

easy

Problem 16

Add Error Handling and Retry to Data Fetcher

medium

Console output appears after the preview logs something.