آپ state کو persist اور hydrate کیسے کرتے ہیں؟

Question

Accepted Answer

**Persisting** state کا مطلب ہے اسے storage میں محفوظ کرنا (localStorage, IndexedDB, ایک backend) تاکہ یہ page reloads یا sessions کے بعد برقرار رہے؛ **hydrating** کا مطلب ہے اسے 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 value فراہم کرتا ہے — carts reloads کے بعد برقرار رہتے ہیں، 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 کو غیر محفوظ طریقے سے persist نہ کریں، refetchable server state کو persist نہ کریں) وہی ہے جو persistence کو مضبوط بناتا ہے بجائے سخت-تشخیص bugs کے منبع کے۔