Skip to main content
Problem 6

Debounced Search with Stale Response Protection

MEDIUMBUILD
React+2

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.

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
Follow-up

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

Hints
Console output will appear here...