## Round 1 - Frontend ## Problem Build a reusable React `Autocomplete` component. As the user types, it fetches suggestions from an async source and renders a dropdown. Selecting a suggestion fills the input and clears the dropdown. ```jsx // Props interface interface AutocompleteProps { fetchSuggestions: (query: string) => Promise ; onSelect: (value: string) => void; placeholder?: string; debounceMs?: number; // default 300 } function Autocomplete(props: AutocompleteProps) { // Your implementation } ``` ## Example ``` api.search(q)} onSelect={(val) => console.log("Selected:", val)} placeholder="Search..." debounceMs={300} /> // User types "rea" -> debounce 300ms -> fetchSuggestions("rea") called // -> ["React", "Reabsorb", "Read"] dropdown appears // User clicks "React" -> input shows "React", dropdown closes, onSelect called ``` ## Follow-ups 1. How do you handle a race condition where a slow response from an earlier query arrives after a newer one? 2. How do you make the dropdown keyboard-navigable (arrow keys, Enter to select, Escape to close)? 3. How would you cache recent query results so repeated keystrokes don't re-fetch the same data? 4. How do you handle the case where `fetchSuggestions` throws an error?

InterviewDB Experience

React Component: Build a Reusable Autocomplete Input with Async Suggestions

Frontend

Interview Experience

Round 1 - Frontend Problem Build a reusable React Autocomplete component. As the user types, it fetches suggestions from an async source and renders a dropdown. Selecting a suggestion fills the input and clears the dropdown. Example Follow-ups How do you handle a race condition where a slow response from an earlier query arrives after a newer one? How do you make the dropdown keyboard-navigable (arrow keys, Enter to select, Escape to close)? How would you cache recent query results so repeated k…

Full Details

🔒

Unlock all Ramp questions

Full insider details, leaked discussions, and candidate experiences.

Get full access — $100 a year, unlimited access

About This Question

This is a candidate experience report from a ramp interview for a frontend role.

It covers the following topics: Coding, Strings, Frontend .

Topics

Coding Strings Frontend

React Component: Build a Reusable Autocomplete Input with Async Suggestions

Interview Experience

Full Details

About This Question

Topics

More Ramp Interview Questions