How would you design a multi-tab form with data persistence in React?

🧩 Scenario

You're designing a multi-tab form like:

• Personal Info
• Address
• Preferences
• Review & Submit

Users should be able to:

• Move between tabs freely
• Keep data even if they refresh
• Auto-save progress
• Validate each tab independently
• Submit aggregated data at the end

---

🧠 Answer (Design Overview)

Core Architecture

1. Centralized State Store

Use a single shared state, not per-tab state.

const formState = {
  personal: { name: '', email: '' },
  address: { city: '', country: '' },
  preferences: { theme: 'light' },
};

2. Tab Navigation Model

Track current tab index and allow free navigation:

setCurrentTab(1); // Address tab

3. Validation Per Tab

Each tab contains its own validation logic.

• Block navigation forward if invalid
• Allow backward navigation always

4. Persistence Strategy

A. localStorage (auto-save)

• Debounce saves (e.g., every 400ms)
• Recover on mount

B. Server Persistence (optional)

• Save to DB on each debounced change
• Useful for long forms

5. Final Submission

Aggregate all tab data:

const payload = {
  ...formState.personal,
  ...formState.address,
  ...formState.preferences,
};

Send to API.

Tradeoffs:

• Server-side persistence improves reliability but costs bandwidth.
• Validation models must be isolated to avoid unnecessary re-renders.

---

🎮 Live Demo: Multi-Tab Form with Data Persistence

---

🔍 Real-World Tips

• Use Zod / Yup for schema-based validation per tab.
• Persist to server for long forms to avoid data loss.
• Use a form context or global store to avoid prop drilling.
• Add dirty state + unsaved changes warning.

---

Quick Practice

1. Add validation that blocks going to next tab.
2. Add auto-save indicator.
3. Add URL-based tab routing (?tab=address).
4. Add reset functionality.

---

Summary

• Multi-tab forms need centralized state, per-tab validation, and persistence.
• Debounce saves to localStorage or server.
• Combine all tabs into one final payload at submission.