How do you build a Multi-step Wizard Form while preserving data when a user goes back?

Short answer

Keep the data for all steps in centralized state in the parent component, render the component for the current step, and provide back and next buttons without losing previous input.

Explanation

Long forms can be divided into logical steps. Validate only the current step before letting the user continue. Keep all collected data in one object and send the final object to the server only on the last step.

Code example

function Wizard() {
  const [step, setStep] = useState(1);
  const [formData, setFormData] = useState({});

  const nextStep = (stepData: object) => {
    setFormData(prev => ({ ...prev, ...stepData }));
    setStep(s => s + 1);
  };

  const prevStep = () => setStep(s => Math.max(1, s - 1));

  return (
    <div>
      {step === 1 && <PersonalInfo onNext={nextStep} defaultValues={formData} />}
      {step === 2 && <BillingInfo onNext={nextStep} onBack={prevStep} defaultValues={formData} />}
    </div>
  );
}

Common mistakes

• Losing previous-step data on back navigation because each step reinitializes its local State.

Follow-up questions

• How do you integrate Zod with React forms for End-to-End Type-Safety?

Sources

• React docs — Choosing the State Structure
• React docs — Extracting State Logic into a Reducer