Hur gör du för att lagra och hydrerar tillståndet?

Question

Accepted Answer

**Lagring** av tillståndet innebär att spara det i lagring (localStorage, IndexedDB, en backend) så att det överlever siduppdateringar eller sessioner; **hydrering** innebär att ladda in det igen i appen vid start. Vanligt för varukorgar, autentiseringstoken, användarinställningar och utkastformulär.

## Grundläggande lagring + hydrering med localStorage

```jsx
function useCart() {
  // HYDRATE: initialize from storage (lazy initializer runs once)
  const [cart, setCart] = useState(() => {
    try {
      const saved = localStorage.getItem("cart");
      return saved ? JSON.parse(saved) : [];      // parse stored JSON
    } catch {
      return [];                                   // guard against corrupt data
    }
  });

// PERSIST: write to storage whenever it changes
  useEffect(() => {
    localStorage.setItem("cart", JSON.stringify(cart));
  }, [cart]);

return [cart, setCart];
}
```

Två delar: läs-och-parse vid initialisering (hydrering) och serializera-och-skriv vid förändring (lagring).

## Biblioteksstöd

```js
// Zustand persist middleware — automatic persist + hydrate
const useStore = create(persist((set) => ({ ... }), { name: "app-store" }));

// redux-persist for Redux; both handle serialization + rehydration
```

## Välja lagring

```text
localStorage  → simple, synchronous, ~5–10MB, strings only (JSON) — preferences, small state
sessionStorage→ like localStorage but cleared when the tab closes
IndexedDB     → large/structured data, async — offline apps, big caches
Cookies       → sent to server; for auth (httpOnly for security)
Backend       → cross-device sync, source of truth for important data
```

## De viktiga varningarna

```text
⚠️ SSR mismatch: localStorage doesn't exist on the server → guard with typeof window,
   and beware hydration mismatches between server-rendered and client state.
⚠️ Versioning/migration: stored shape may differ from new code → version it and migrate.
⚠️ Don't persist sensitive data (tokens) in localStorage (XSS-readable) — prefer httpOnly cookies.
⚠️ Don't persist server state you can refetch (let React Query handle caching).
⚠️ Validate/guard on hydrate — stored data can be stale or corrupt.
```

## Varför det är viktigt

Lagring levererar riktigt UX-värde — varukorgar överlever uppdateringar, inställningar och utkast går inte förlorade, användare förblir inloggade.

Men naiv implementering introducerar subtila, allvarliga problem: SSR-hydreringskonflikter, föråldrad/skadad data, schemamigreringshaveri och **säkerhetsrisker** (lagring av token i XSS-läsbar lagring).

Att kunna lagre- och hydreringsmönstret, välja rätt lagring för data och respektera varningarna (skydda mot SSR, versionera schemat, lagra inte hemligheter osäkert, lagra inte refetchbar serverstate) är det som gör lagring robust istället för en källa till svårdiagnostiserade buggar.