# Back navigation preserves form state

- **Pattern:** `ab-002369` (`saas-onboarding.onboarding-ux.back-navigation-preserves-state`)
- **Severity:** low
- **Lifecycle:** active
- **Last modified:** 2026-04-18
- **Canonical URL:** https://auditbuffet.com/patterns/ab-002369
- **License:** CC-BY-4.0 — attribute to AuditBuffet Pattern Catalog (https://auditbuffet.com/patterns/ab-002369)

## Why it matters

If navigating back to a previous onboarding step wipes out the data the user already entered, any attempt to correct an answer on an earlier step forces the user to re-enter every subsequent field. The user-experience taxon treats form-state preservation as table stakes for multi-step wizards: state loss on back navigation converts a typo-correction into a full restart, and a meaningful fraction of users simply abandon rather than redo five minutes of typing. This is especially punishing for users on mobile or flaky connections.

## Severity rationale

Low because the flow technically completes, but state loss on back-navigation silently churns users mid-wizard.

## Remediation

Lift form state above the step components so navigating between steps preserves it. Use `react-hook-form` with `FormProvider` in `src/app/(app)/onboarding/layout.tsx` so every step shares one form instance, and for route-based wizards persist values to `sessionStorage` and rehydrate on mount.

```tsx
const methods = useForm({ defaultValues: savedData });
return (
  <FormProvider {...methods}>
    {children}
  </FormProvider>
);
```

## Detection

- **ID:** `back-navigation-preserves-state`
- **Severity:** `low`
- **What to look for:** Count all multi-step form stages. For each, check whether navigating back preserves entered data. Enumerate state management patterns: React state, form library state, URL query params, localStorage, sessionStorage.
- **Pass criteria:** Navigating back to a previous onboarding step shows previously entered data, not a blank form. At least 1 state persistence mechanism must be present across steps.
- **Fail criteria:** Navigating back to a previous step clears the previously entered data, forcing the user to re-enter information.
- **Skip (N/A) when:** The onboarding flow is a single-step form with no back navigation, or no onboarding flow exists.
- **Detail on fail:** `"Navigating back in the multi-step onboarding form clears previously entered fields. Users who go back to correct an answer must re-enter all subsequent data."`
- **Remediation:** Use `react-hook-form` with a shared context in `src/app/(app)/onboarding/layout.tsx`:

  ```tsx
  const methods = useForm({ defaultValues: savedData });
  return (
    <FormProvider {...methods}>
      {children}
    </FormProvider>
  );
  ```

  For route-based steps, persist to `sessionStorage` and rehydrate on mount.

---

Taxons: user-experience

HTML version: https://auditbuffet.com/patterns/ab-002369