¿Cómo persistes e hidratas el estado?

Question

Accepted Answer

**Perseguir** estado significa guardarlo en almacenamiento (localStorage, IndexedDB, un backend) para que sobreviva a recargas de página o sesiones; **hidratar** significa cargarlo de nuevo en la aplicación al inicio. Común para carritos, tokens de autenticación, preferencias de usuario y formularios de borrador.

## Persistencia e hidratación básica con 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];
}
```

Las dos partes: leer y analizar en la inicialización (hidrate) y serializar y escribir en los cambios (persist).

## Soporte de biblioteca

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

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

## Elegir almacenamiento

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

## Las advertencias 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.
```

## Por qué es importante

La persistencia entrega valor real de UX — los carritos sobreviven a recargas, las preferencias y los borradores no se pierden, los usuarios permanecen conectados.

Pero la implementación ingenua introduce problemas sutiles y graves: desajustes de hidratación SSR, datos obsoletos/corruptos, ruptura de migración de esquema y **riesgos de seguridad** (persistencia de tokens en almacenamiento legible por XSS).

Conocer el patrón persist/hidrate, elegir el almacenamiento correcto para los datos y respetar las advertencias (proteger de SSR, versionar el esquema, no almacenar secretos de forma segura, no persistir estado del servidor recuperable) es lo que hace que la persistencia sea robusta en lugar de ser una fuente de errores difíciles de diagnosticar.