Deviopath › React

Debounced Search

Hard · Async

The helper fakeSearch(query) returns a Promise that resolves after 50ms with the fruits whose name contains the query (case-insensitive).

Render an <input placeholder="Search fruits">. Search only after the user has stopped typing for 400ms (debounce): every keystroke restarts the 400ms wait.

- From the moment the user types until the results arrive, show <p className="status">Searching...</p> (and no results list).

- Show the results as <li> items inside a <ul>.

- If there are no results, show <p className="status">No results</p>.

- If the input is empty (after trimming), show nothing: no list, no status and no search.

- Ignore results that arrive for an old query.

Next: Load More Button