Frontend Beauty
ESC

Type to search the knowledge base.

Multi-step Forms in React

Multi-step wizards: lift durable answers, key step UI, validation per step, and URL-backed step state.

intermediate3 min read
  • react
  • multi-step

Multi-step forms fail when each step keeps private copies of the same fields, or when “Back” wipes answers because the step unmounted. Treat the wizard as one form document with a step index for chrome.

State model

const initial = { email: '', plan: 'free', card: '' };

function Wizard() {
  const [step, setStep] = useState(0);
  const [data, setData] = useState(initial);

  function update(patch) {
    setData((d) => ({ ...d, ...patch }));
  }

  return (
    <div>
      <StepIndicator step={step} />
      <StepPanel
        key={step}
        step={step}
        data={data}
        onChange={update}
        onNext={() => setStep((s) => s + 1)}
        onBack={() => setStep((s) => s - 1)}
      />
    </div>
  );
}

Durable answers live in data. key={step} remounts step chrome (local UI like “show password”) without losing answers — see resetting state.

Per-step validation

function validate(step, data) {
  if (step === 0 && !data.email.includes('@')) return 'Valid email required';
  if (step === 1 && !data.plan) return 'Pick a plan';
  return null;
}

function handleNext() {
  const err = validate(step, data);
  if (err) {
    setError(err);
    return;
  }
  setError(null);
  setStep((s) => s + 1);
}

Validate the step you leave, and re-validate everything on final submit. Server must re-check; client validation is UX only.

URL-backed steps

For deep links and refresh safety:

// searchParam step=2
const step = Number(searchParams.get('step') ?? '0');

Keep data in memory, sessionStorage, or a draft API so refresh does not nuke progress. Do not put secrets (card PANs) in the URL.

Accessibility

  • Announce step changes (aria-live on the step title).
  • Focus the step heading when step changes.
  • Do not remove Back/Next from the tab order.
  • Associate errors with fields via aria-describedby.

Interview out-loud

“I keep one lifted form state for the whole wizard and a step index for UI. Each step is a view over that state. I validate on next and on final submit, optionally sync step to the URL, and I key step panels only for ephemeral UI — not for the answers.”

Further reading

Edge cases worth rehearsing

Interviewers and production incidents cluster around the same edges: first render versus update, empty and loading states, Strict Mode double setup, concurrent interruptions, and what happens when identity (key, route params, user id) changes mid-edit. Walk one concrete user journey end-to-end — open, edit, navigate away, come back — and say which state survives.

Prefer fixing data flow and ownership before reaching for memoization or micro-optimizations. Prefer event handlers over effects when a user action is the trigger. Prefer deriving values during render over mirroring props into state. Prefer stable list keys from business ids. Measure with the profiler when performance is the claim.

When you cite an API, mention one failure mode: abort on unmount, serializable props across server/client boundaries, focus restoration for dialogs, or cache invalidation after a mutation. Specific beats generic every time.

Edge cases worth rehearsing

Interviewers and production incidents cluster around the same edges: first render versus update, empty and loading states, Strict Mode double setup, concurrent interruptions, and what happens when identity (key, route params, user id) changes mid-edit. Walk one concrete user journey end-to-end — open, edit, navigate away, come back — and say which state survives.

Prefer fixing data flow and ownership before reaching for memoization or micro-optimizations. Prefer event handlers over effects when a user action is the trigger. Prefer deriving values during render over mirroring props into state. Prefer stable list keys from business ids. Measure with the profiler when performance is the claim.

When you cite an API, mention one failure mode: abort on unmount, serializable props across server/client boundaries, focus restoration for dialogs, or cache invalidation after a mutation. Specific beats generic every time.

Related guides