तपाई कसरी state को persist र hydrate गर्नुहुन्छ?

Question

Accepted Answer

**Persist गर्नु** भनेको state लाई storage (localStorage, IndexedDB, एक backend) मा सेभ गरेर यो page reload वा session पछि पनि टिकिरहोस् गर्नु हो; **hydrate गर्नु** भनेको startup मा यसलाई app मा फिर्ता लोड गर्नु हो। यो carts, auth tokens, user preferences, र draft forms को लागि सामान्य छ।

## localStorage साथ आधारभूत persist + hydrate

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

दुई भाग: init मा read-and-parse (hydrate), र change मा serialize-and-write (persist)।

## Library support

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

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

## Storage छनोट गरेर

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

## महत्त्वपूर्ण सचेतता

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

## किन यो महत्त्वपूर्ण छ

Persistence ले वास्तविक UX मूल्य प्रदान गर्छ — carts reload पछि टिकिरहन्छ, preferences र drafts हराउँदैनन्, users logged in रहन्छन्।

तर सरल implementation ले सूक्ष्म, गम्भीर समस्याहरू परिचय गर्छ: SSR hydration mismatches, stale/corrupt data, schema-migration breakage, र **security risks** (tokens लाई XSS-readable storage मा persist गर्नु)।

Persist/hydrate pattern जान्नु, data को लागि सही storage छनोट गर्नु, र सचेताताहरूलाई सम्मान गर्नु (SSR को लागि guard गर्नु, schema को version गर्नु, secrets लाई unsafely persist नगर्नु, refetchable server state लाई persist नगर्नु) यो हो जसले persistence लाई कठिन-diagnose हुने bugs को स्रोत को सट्टा robust बनाउछ।