Implement a multi-step form in React

Quick Overview

This question evaluates a candidate's competence in React front-end development, including component state management, multi-step form validation, UI state control during asynchronous submissions, and error handling.

Implement a multi-step form in React

Company: Coinbase

Role: Software Engineer

Category: System Design

Difficulty: medium

Interview Round: Onsite

Build a multi-step form component for the web. Steps: ( 1) collect basic user information; ( 2) collect address information; ( 3) review and confirm submission. Requirements: implement basic field validation; allow step navigation and switching; control disabled states appropriately; show a loading state on submit; and display error messaging on failed submissions. Use React. Be ready to discuss: why choose a reducer-based state management approach versus multiple useState hooks; how you would organize the component structure as the number of steps grows large; how to design error messages to balance good UX with clear logic; and what performance optimizations you would apply (e.g., memoization, lazy rendering).

Quick Answer: This question evaluates a candidate's competence in React front-end development, including component state management, multi-step form validation, UI state control during asynchronous submissions, and error handling.

|Home/System Design/Coinbase
Coinbase logo
Coinbase
Sep 6, 2025, 12:00 AM
mediumSoftware EngineerOnsiteSystem Design
15
0

Build a Multi‑Step Form Component in React

Context

You are implementing a multi‑step web form in React. The form gathers user data over several steps and supports validation, navigation, and robust submission behavior.

Steps

  1. Collect basic user information.
  2. Collect address information.
  3. Review and confirm submission.

Requirements

  • Implement basic field validation.
  • Allow step navigation and switching.
  • Control disabled states appropriately (e.g., buttons, inputs while submitting).
  • Show a loading state on submit.
  • Display error messaging on failed submissions.
  • Use React functional components.

Discussion Topics (be ready to explain)

  • Why choose a reducer‑based state management approach versus multiple useState hooks.
  • How to organize the component structure as the number of steps grows large.
  • How to design error messages to balance good UX with clear logic.
  • What performance optimizations you would apply (e.g., memoization, lazy rendering).

Submit Your Answer to Earn 20XP

Sign in to leave a comment

Loading comments...