Durumu nasıl kalıcı hale getirir ve rehidrate edersiniz?

Question

Accepted Answer

**Durumun kalıcı hale getirilmesi**, durumu depolamaya (localStorage, IndexedDB, bir backend) kaydederek sayfa yeniden yüklemelerinden veya oturumlardan sağlam kalmasını sağlamak anlamına gelir; **rehidrate etme**, başlangıçta onu uygulamaya geri yüklemek anlamına gelir. Alışveriş sepetleri, kimlik doğrulama belirteçleri, kullanıcı tercihleri ve taslak formlar için yaygındır.

## localStorage ile temel kalıcı hale getirme + rehidrate

```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];
}
```

İki yarı: başlatmada (rehidrate) oku-ve-ayrıştır, değişikliklerde (kalıcı hale getir) seri hale getir-ve-yaz.

## Kütüphane desteği

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

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

## Depolama seçimi

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

## Önemli uyarılar

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

## Neden önemli

Kalıcı hale getirme gerçek UX değeri sağlar — sepetler yeniden yüklemelerden sağlam kalır, tercihler ve taslaklar kaybolmaz, kullanıcılar giriş yapmış kalır.

Ancak naif uygulama hafif, ciddi sorunlar getirer: SSR rehidrate uyuşmazlığı, eski/bozuk veriler, schema-migration başarısızlığı ve **güvenlik riskleri** (XSS tarafından okunabilen depolamada belirteçleri kalıcı hale getirme).

Kalıcı hale getirme/rehidrate paternini bilmek, veriler için doğru depolamayı seçmek ve uyarılara saygı göstermek (SSR'ye karşı koruma, schema'yı sürümleme, sırları güvensiz bir şekilde depolamama, yeniden getirilebilir sunucu durumunu kalıcı hale getirmeme) kalıcı hale getirmeyi sağlam yapar, bunun yerine tanılanması zor hatalar kaynağı olmaktan çıkarır.