What React skills does "Build a Debounced Search" practice?

This challenge practices: useState, useEffect, debouncing, cleanup. It is rated medium difficulty and takes approximately 20 minutes.

What are the hints for "Build a Debounced Search"?

Use separate state for query (immediate) and debouncedQuery (delayed) In useEffect, use setTimeout to set the debounced value after 300ms Return a cleanup function: return () => clearTimeout(timer)

medium20 min

Build a Debounced Search

Build a search input that debounces user keystrokes, only triggering a search after the user stops typing for 300ms. Display a list of filtered results and a loading indicator while the debounce timer is active. This teaches effect cleanup and timer management.

Skills

useStateuseEffectdebouncingcleanup

Tests

Shows all items initially
Shows "Searching..." indicator while debouncing
Filters results after debounce delay
Clears results when input is cleared

Your Code

Loading editor...