Implement a multi-step form in React

Read the full interview experience this question came from →

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: Stripe

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).

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.

Read the full Stripe Software Engineer interview experience this question came from

|Home/System Design/Stripe
Stripe logo
Stripe
Sep 6, 2025
mediumSoftware EngineerOnsiteSystem Design
23
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...