QuestionsReact

Build a typeahead / autocomplete

Machine CodingHardReact

Build an autocomplete: debounced input, async suggestions, loading/empty states, keyboard nav, no race conditions.

What it tests

The classic senior FE machine-coding round — combines debounce, async, a11y, and race handling.

Approach & answer

Compose the pieces: (1) debounce the query so you don't fetch on every keystroke; (2) fetch suggestions in an effect keyed on the debounced query, with an ignore flag to drop stale responses; (3) track an activeIndex for ArrowUp/ArrowDown/Enter/Escape keyboard navigation; (4) render loading, empty, and results states; (5) add ARIA roles (combobox/listbox/option, aria-activedescendant) for accessibility. Cache results per query if the same terms recur. This is the reusable, WCAG-compliant component work you did at Domo. The accessibility layer is where senior candidates separate themselves: follow the WAI-ARIA combobox pattern precisely — the input is role=combobox with aria-expanded, aria-controls pointing at the listbox id, and aria-activedescendant pointing at the active option's id (so focus stays in the input while arrow keys move a virtual highlight, which is what screen readers announce). Options are role=option with aria-selected. Beyond a11y and races, production-grade details are: minimum query length before firing, a request cache/in-flight dedupe, cancelling superseded requests with AbortController, clamping/ wrapping the active index, closing on outside-click and blur, and highlighting the matched substring. Structure the component so the data logic (debounce + fetch + cache) lives in a hook and the presentation is a dumb list — that's what makes it reusable across the app.

Use this technique when

Search bars, command palettes, tag pickers, address lookups — anywhere users pick from server-driven suggestions.

References

jsx