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