Implement debounced async autocomplete input

Read the full interview experience this question came from →

Quick Overview

Implement debounced async autocomplete input evaluates requirements, assumptions, structured reasoning, trade-offs, and verification in a realistic interview setting. A strong answer states assumptions, handles edge cases, explains trade-offs, and shows how to validate the result clearly.

Implement debounced async autocomplete input

Company: Coinbase

Role: Software Engineer

Category: Software Engineering Fundamentals

Difficulty: medium

Interview Round: Technical Screen

Implement an autocomplete input component from scratch. Requirements: 1) Debounce user keystrokes to avoid excessive network calls. 2) Perform asynchronous fetches for suggestions; handle loading, errors, and empty results; prevent stale responses from overwriting newer ones. 3) Render a suggestions list under the input with proper focus management. 4) Support keyboard navigation: Up/Down arrows move the active index, the active option is visually highlighted, and Enter selects/submits the active option. 5) Describe your event-handler and state design (what states you keep, how they transition, and how you wire input, list, and keyboard events).

Overview: Implement debounced async autocomplete input evaluates requirements, assumptions, structured reasoning, trade-offs, and verification in a realistic interview setting. A strong answer states assumptions, handles edge cases, explains trade-offs, and shows how to validate the result clearly.

Read the full Coinbase Software Engineer interview experience this question came from

Coinbase logo
Coinbase
Aug 1, 2025
mediumSoftware EngineerTechnical ScreenSoftware Engineering Fundamentals
14
0

Implement debounced async autocomplete input

Implement an Autocomplete Input Component (Frontend Technical Screen)

Context

Build an autocomplete input from scratch (no UI libraries). You may use plain JavaScript or a framework like React. Assume you can call an async function to fetch suggestions from a server.

Assume an API like:

  • fetchSuggestions(query: string, signal?: AbortSignal): Promise<string[]> — resolves to a list of suggestion strings; rejects on network error; supports abort via AbortController.

Requirements

  1. Debounce user keystrokes to avoid excessive network calls.
  2. Perform asynchronous fetches for suggestions; handle loading, errors, and empty results; prevent stale responses from overwriting newer ones.
  3. Render a suggestions list under the input with proper focus management.
  4. Support keyboard navigation:
    • Up/Down arrows move the active index.
    • The active option is visually highlighted.
    • Enter selects/submits the active option.
  5. Describe your event-handler and state design: what states you keep, how they transition, and how you wire input, list, and keyboard events.

Clarifying Questions to Ask Guidance

  • Clarify the goal, inputs, constraints, stakeholders, and success criteria.
  • State assumptions before using them.
  • Keep the answer grounded in the prompt rather than adding outside facts.

What a Strong Answer Covers Guidance

  • A structured framing of the problem and constraints.
  • A concrete approach with trade-offs and edge cases.
  • A way to validate the answer and communicate the recommendation.

Follow-up Questions Guidance

  • What assumption is most important to validate first?
  • What could make the answer fail in practice?
  • How would you explain the result to a non-technical stakeholder?