Coinbase·Frontend Engineer·Technical Phone Screen·Senior

Senior

Apr 2026

Summary

Did a frontend technical round at Coinbase where they had me build a dropdown component from scratch. Pretty standard UI component challenge but there's more depth to it than you'd expect going in cold.

Questions Asked (1)

Build a reusable dropdown component, covering both controlled and uncontrolled usage patterns.

System DesignTechnical Trade-offs

Author's notes

I underestimated this.

Create a free account to read the full note

AI HintsAI Generated

Suggested Approach

Start by clarifying requirements and the API contract, then design a component that supports both controlled (value + onChange) and uncontrolled (defaultValue + internal state) modes. Walk through the implementation, emphasizing how to detect the mode, manage state, and ensure accessibility and reusability. Finally, discuss trade-offs and edge cases like form integration and performance.

Pro tip: Explicitly call out the controlled/uncontrolled warning React gives when switching modes, and explain how you'd prevent it—this shows you've built real components and understand React's internals.

1. Clarify requirements and API

Ask about expected features (single/multi-select, search, grouping) and define the component's props, including value, defaultValue, onChange, and isOpen/onOpenChange for controlled open state.

2. Design controlled vs uncontrolled logic

Explain how to detect controlled mode (e.g., value !== undefined) and manage internal state for uncontrolled mode, ensuring the component works seamlessly in both.

3. Implement core behavior and accessibility

Outline the component structure: trigger, menu, options, keyboard navigation, ARIA roles, and focus management. Highlight how state flows in each mode.

4. Handle edge cases and integration

Discuss form library integration (e.g., react-hook-form), resetting uncontrolled state, and avoiding controlled/uncontrolled switching warnings.

5. Discuss trade-offs and performance

Compare controlled vs uncontrolled: predictability vs simplicity, re-renders, and when to recommend each. Mention memoization and virtualization for large lists.

Key Points to Mention

Controlled component pattern: value prop and onChange callback, with parent owning state.
Uncontrolled component pattern: defaultValue prop and internal state via useState/useRef.
Detecting controlled mode: check if value prop is not undefined; use a ref to track previous mode to avoid warnings.
Accessibility: ARIA attributes (role='listbox', aria-expanded, aria-activedescendant), keyboard navigation (arrow keys, Enter, Escape), and focus management.
Form integration: using hidden input for uncontrolled, or Controller from react-hook-form for controlled.
Performance considerations: memoizing options, virtualizing long lists, and avoiding unnecessary re-renders.

AI-generated suggestions, not part of the candidate's original notes. May be inaccurate — verify before relying on them.