Multi-step (wizard) forms have one core requirement: data must survive navigating between steps, even though step components mount and unmount. The answer is where the state lives.

Lift the state above the steps

The form data must live in a single owner that outlives the individual steps — a parent component, a context, or a reducer:

function Wizard() {
  const [formData, setFormData] = useState({
    account: {}, profile: {}, payment: {},
  });
  const [step, setStep] = useState(0);

  const updateStep = (key, values) =>
    setFormData((d) => ({ ...d, [key]: { ...d[key], ...values } }));

  const steps = [
    <AccountStep  data={formData.account} onChange={(v) => updateStep("account", v)} />,
    <ProfileStep  data={formData.profile} onChange={(v) => updateStep("profile", v)} />,
    <PaymentStep  data={formData.payment} onChange={(v) => updateStep("payment", v)} />,
  ];
  return <>{steps[step]}{/* + nav */}</>;
}

If state lived inside each step component, it would be destroyed when that step unmounts on navigation. Lifting it up (or into context / a useReducer) is the whole trick — each step just reads and writes its own slice.

The pieces

• Single source of truth — one formData object (or reducer state). For deeply nested wizards, useReducer or a context keeps it clean and avoids prop-drilling through many steps.
• Each step is "controlled" by the parent — receives its slice as props, reports changes up. Steps stay stateless/dumb.
• Per-step validation — validate a step's slice before allowing "Next"; keep errors in the shared state too.
• Refresh-safety — persist formData to sessionStorage/localStorage (debounced) so a refresh or accidental nav-away doesn't wipe a long form. Optionally save partial progress to the server.
• Final submit — assemble the full formData object and send it once at the end; show a review step summarizing all slices.
• Keep steps mounted vs unmounted — either is fine as long as state is lifted; unmounting saves memory, and lifted state means nothing is lost.

The framing

"The requirement is that data survives step navigation despite components unmounting — so the state can't live in the steps. I lift the entire form into one owner above them: a parent useState/useReducer or a context. Each step is controlled — it gets its slice as props and reports changes up. I validate each step's slice before 'Next', persist the whole object to sessionStorage so a refresh doesn't lose progress, and submit the assembled object once at the end after a review step."