Comment persistez-vous et réhydratez-vous l'état ?

Question

Accepted Answer

**Persister** l'état signifie le sauvegarder dans un stockage (localStorage, IndexedDB, un backend) afin qu'il survive aux rechargements de page ou aux sessions; **réhydrater** signifie le recharger dans l'application au démarrage. Courant pour les paniers, les jetons d'authentification, les préférences utilisateur et les formulaires brouillons.

## Persistance et réhydratation de base avec 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];
}
```

Les deux moitiés : lire et analyser à l'initialisation (réhydrater), et sérialiser et écrire au changement (persister).

## Support des bibliothèques

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

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

## Choix du stockage

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

## Les mises en garde importantes

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

## Pourquoi c'est important

La persistance offre une réelle valeur UX — les paniers survivent aux rechargements, les préférences et les brouillons ne sont pas perdus, les utilisateurs restent connectés.

Mais une implémentation naïve introduit des problèmes subtils et graves : des désaccords d'hydratation SSR, des données obsolètes ou corrompues, des ruptures de migration de schéma, et des **risques de sécurité** (persistance de jetons dans un stockage lisible par XSS).

Connaître le motif persist/hydrate, choisir le bon stockage pour les données, et respecter les mises en garde (protéger le SSR, versionner le schéma, ne pas stocker les secrets de manière non sécurisée, ne pas persister l'état serveur qu'on peut refetcher) est ce qui rend la persistance robuste plutôt qu'une source de bugs difficiles à diagnostiquer.