Debounce with search

Build a search-as-you-type input that fetches recipe results from an API. The key challenges are debouncing user input to avoid excessive API calls, caching results, cancelling outdated requests, and supporting keyboard navigation in the dropdown.

Overview

A single input triggers search against DummyJSON Recipes API. As the user types, results appear in a list below; selecting an item (click or Enter) fills the input. The implementation keeps the UI responsive and avoids redundant network calls.

Architecture

┌─────────────────────────────────────┐
│  DebounceWithSearch                 │
│  - query, results, loading state    │
│  - cache ref, requestId ref         │
└──────────────┬──────────────────────┘
               │
               ├── useDebounce (delay execution)
               ├── fetchResults (cache + request cancellation)
               └── handleKeyDown (ArrowUp/Down, Enter, Escape)

Optimizations:

1. Debounce — Wait until the user pauses typing (e.g. 300ms) before calling the API.
2. Cache — Store results by query key and reuse them for repeated searches.
3. Request cancellation — Use a request ID so only the latest response updates state; older in-flight requests are ignored.
4. Keyboard — Arrow keys move highlight, Enter selects, Escape closes the list.

useDebounce hook

A small hook that returns a function which delays running a callback until after a quiet period:

TSXcomponent.tsx
1const debounce = useDebounce();
2// Later: debounce(() => fetchResults(query), 300);

Each new call clears the previous timer, so only the last invocation runs after the delay.

Fetch and request ordering

Before fetching, increment a requestIdRef. After the response arrives, only apply it if the ID still matches the current request. That way, if the user types again and a new request is sent, the older response won’t overwrite newer results.

TSXcomponent.tsx
1const id = ++requestIdRef.current;
2// ... fetch ...
3if (id !== requestIdRef.current) return;
4setResults(data.recipes || []);

Keyboard and selection

• ArrowDown / ArrowUp — Update a highlighted index (clamped to list length).
• Enter — If something is highlighted, set the input to that result and clear the list.
• Escape — Clear results and reset highlight.

The same selection logic runs on click: set query to the item’s name and close the dropdown.