How would you implement a multi-step wizard component in React?

🧩 Scenario

You're building a multi-step onboarding wizard with requirements:

• Each step has unique fields
• Validation per step
• Back/Next navigation
• Progress indicator
• Final review & submit
• Optional: persist progress in localStorage or backend

🧠 Answer (Design Overview)

Key Patterns:

1. Parent-Managed State — ensures data isn’t lost when steps unmount.
2. Step Registry — an array of step configs { id, label, component }.
3. Validation Hook per Step — validate before moving forward.
4. Isolated Step Components — each receives data, updateData, and errors.
5. Optional Persistence — save progress on each change.

Tradeoffs:

• Storing state per-step increases complexity; storing in a single object is simpler.
• Validation can be inline or schema-based (Yup/Zod) depending on complexity.

🎮 Live Demo: Multi-Step Wizard

🔍 Real-World Tips

• Use Zod/Yup for complex onboarding flows.
• Persist progress with localStorage or session endpoint.
• Large org apps often split wizards into micro-steps with autosave.
• For mobile UX, avoid too many steps — group fields smartly.

🧭 Diagram

flowchart LR
  A[Step 1] -->|Next| B[Step 2]
  B -->|Next| C[Review]
  B -->|Back| A
  C -->|Back| B
  C -->|Submit| D[Finish]

Quick Practice

1. Add a phone field to step 2.
2. Add a new final step: Confirmation screen.
3. Persist step & data in localStorage.

Summary

• Parent stores all wizard state.
• Steps are config-driven & reusable.
• Validate before moving forward.
• Optional persistence improves UX for long forms.