Implement a multi-step form in React

Q: Implement a multi-step form in React

This is a System Design interview question from Coinbase for Software Engineer roles. View the full question and solution on PracHub.

Q: How do I approach System Design interview questions?

System Design questions require understanding of core concepts and practice. PracHub provides solutions with explanations to help you master system design interviews.

Question

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

Collect basic user information.
Collect address information.
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).