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.

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

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

Hints
Related Practice
Track
Backend Basics

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

View track →
Problem 3
Password Strength Tagger
easy
Problem 2
In-Memory Rate Limiter
medium
Problem 5
Config Merge with Deletions
medium
Console output will appear here...