ਤੁਸੀਂ state ਨੂੰ kaise persist ਅਤੇ hydrate ਕਰਦੇ ਹੋ?

Question

Accepted Answer

**State ਨੂੰ persist ਕਰਨਾ** ਮਤਲਬ ਇਸ ਨੂੰ storage (localStorage, IndexedDB, ਇੱਕ backend) ਵਿੱਚ ਸੁਰੱਖਿਅਤ ਕਰਨਾ ਤਾਂ ਜੋ ਇਹ page reloads ਜਾਂ sessions ਤੋਂ ਬਚ ਜਾਵੇ; **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 value ਦਿੰਦਾ ਹੈ — carts reloads ਨੂੰ ਬਚਦੇ ਹਨ, preferences ਅਤੇ drafts ਗੁਆ ਨਹੀਂ ਜਾਂਦੇ, users logged in ਰਹਿੰਦੇ ਹਨ।

ਪਰ naive 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 ਨੂੰ robust ਬਣਾਉਂਦਾ ਹੈ ਬਜਾਏ ਮੁਸ਼ਕਲ-diagnose bugs ਦੇ ਸਰੋਤ ਦੇ।