Jak persystować i rehydratyzować stan?

Question

IT Interview Practice · Accepted Answer

**Persystowanie** stanu oznacza zapisanie go do magazynu (localStorage, IndexedDB, backend), aby przetrwał przeładowania strony lub sesje; **rehydratyzowanie** oznacza załadowanie go z powrotem do aplikacji przy uruchomieniu. Typowe dla koszyków, tokenów autentyczności, preferencji użytkownika i formularzy roboczych.

## Podstawowe persystowanie + rehydratyzowanie za pomocą 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];
}
```

Dwie części: odczyt i parsowanie przy inicjalizacji (rehydratyzowanie), oraz serializacja i zapis przy zmianie (persystowanie).

## Wsparcie bibliotek

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

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

## Wybór magazynu

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

## Ważne zastrzeżenia

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

## Dlaczego to ważne

Persystowanie zapewnia rzeczywistą wartość UX — koszyki przetrwają przeładowania, preferencje i szkice nie znikają, użytkownicy pozostają zalogowani.

Ale naiwna implementacja wprowadza subtelne, poważne problemy: niezgodności hydratacji SSR, nieświeże/uszkodzone dane, przerwanie migracji schematu, oraz **zagrożenia bezpieczeństwa** (persystowanie tokenów w magazynie czytelnym dla XSS).

Znajomość wzorca persystowania/rehydratyzowania, wybranie właściwego magazynu dla danych i poszanowanie zastrzeżeń (ochrona przed SSR, wersjonowanie schematu, nietrwałe przechowywanie sekretów, nietrwałe przechowywanie stanu serwera do ponownego pobrania) to to, co czyni persystowanie solidnym zamiast źródłem trudnych do zdiagnozowania błędów.

Podstawowe persystowanie + rehydratyzowanie za pomocą localStorage

Wsparcie bibliotek

Wybór magazynu

Ważne zastrzeżenia

Dlaczego to ważne

Powiązane pytania