How would you build a search with autocomplete in React?

🧩 Scenario

Your product team wants a Google-like autocomplete search bar. Requirements:

• Fetch suggestions from an API with debouncing
• Show a dropdown with highlighted items
• Keyboard navigation (↑ ↓ Enter)
• Click selection
• Loading state + empty state
• Close dropdown on blur
• Accessible via ARIA roles

Build a reusable autocomplete component.

🧠 Answer (Design Overview)

Core Architectural Points:

1. Debounced Input — delay API calls by 300ms.
2. Async Suggestion Fetcher — separate fetch logic for reuse.
3. Dropdown State Machine — open/close on input, blur, and selection.
4. Keyboard Navigation — maintain activeIndex in state.
5. High-performance Rendering — memoize list items.
6. Accessibility — use role="listbox" and role="option".

Tradeoffs:

• Controlled inputs are predictable but more verbose.
• Debouncing improves performance but delays response slightly.

🎮 Live Demo: Search Autocomplete

🔍 Real-World Notes

• Use AbortController to prevent race conditions.
• For large datasets, move filtering to backend.
• Add caching to prevent re-searching the same query.
• For best UX, preload common queries (trending, recent).

🧭 Diagram

sequenceDiagram
  participant User
  participant Input
  participant Debounce
  participant API
  User->>Input: type text
  Input->>Debounce: wait 300ms
  Debounce->>API: fetch suggestions
  API-->>Debounce: return list
  Debounce-->>Input: update dropdown

Quick Practice

1. Add arrow-key wraparound behavior.
2. Add highlighting of matched characters.
3. Add caching layer: { [query]: results }.

Summary

• Debounce input to avoid spammy requests.
• Manage dropdown visibility explicitly.
• Add keyboard navigation for accessibility.
• Abort in-flight requests to avoid stale updates.