Cum persisti și rehidratasezi starea?

Question

Accepted Answer

**Persistarea** stării înseamnă a o salva în stocare (localStorage, IndexedDB, un backend) pentru ca aceasta să supraviețuiască reîncărcărilor de pagină sau sesiunilor; **rehibrația** înseamnă a o reîncărca în aplicație la pornire. Obișnuit pentru coșuri, tokeni de autentificare, preferințe utilizator și formulare în ciornă.

## Persista + rehidratare de bază cu 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];
}
```

Două jumătăți: citire-și-parsare la inițializare (rehibrație), și serializare-și-scriere la schimbare (persistare).

## Suport bibliotecă

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

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

## Alegerea stocării

```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
```

## Avertismentele importante

```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.
```

## De ce contează

Persistarea oferă valoare UX reală — coșurile supraviețuiesc reîncărcărilor, preferințele și ciornele nu se pierd, utilizatorii rămân conectați.

Dar implementarea naivă introduce probleme subtile și grave: nepotriviri de rehidratare SSR, date vechi/corupte, rupere de migrare a schemei și **riscuri de securitate** (persistarea tokenilor în stocare citibilă de XSS).

Cunoașterea modelului persista/rehibrație, alegerea stocării potrivite pentru date și respectarea avertismentelor (protejare pentru SSR, versiuni schema, nu stoca secrete în mod nesigur, nu persista starea serverului refetchable) este ceea ce face persistarea robustă în loc să fie o sursă de buguri greu de diagnosticat.