आप अवस्था को कैसे बनाए रखते और पुनरुद्धार करते हैं?

Question

Accepted Answer

**अवस्था को बनाए रखना** का अर्थ है इसे स्टोरेज (localStorage, IndexedDB, बैकेंड) में सहेजना ताकि पृष्ठ रीलोड या सत्रों के बाद भी यह बरकरार रहे; **पुनरुद्धार** का अर्थ है इसे स्टार्टअप पर ऐप में वापस लोड करना। कार्ट, प्रमाणीकरण टोकन, उपयोगकर्ता वरीयताएँ और ड्राफ्ट फॉर्म के लिए सामान्य।

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

दोनों भाग: आरंभ पर पढ़ें और पार्स करें (पुनरुद्धार), और परिवर्तन पर क्रमबद्ध करें और लिखें (बनाए रखना)।

## लाइब्रेरी समर्थन

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

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

## स्टोरेज चुनना

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

## यह क्यों मायने रखता है

दृढ़ता वास्तविक UX मूल्य प्रदान करती है — कार्ट रीलोड के बाद जीवित रहते हैं, वरीयताएँ और ड्राफ्ट खो नहीं जाते हैं, उपयोगकर्ता लॉगिन रहते हैं।

लेकिन भोली कार्यान्वयन सूक्ष्म, गंभीर समस्याएँ पेश करती है: SSR पुनरुद्धार विसंगतियाँ, पुरानी/भ्रष्ट डेटा, स्कीमा-माइग्रेशन विघ्न, और **सुरक्षा जोखिम** (XSS-पठनीय स्टोरेज में टोकन बनाए रखना)।

परिदृश्य/पुनरुद्धार पैटर्न को जानना, डेटा के लिए सही स्टोरेज चुनना, और सावधानियों का सम्मान करना (SSR की सुरक्षा करना, स्कीमा संस्करण देना, गुप्त को असुरक्षित रूप से संग्रहीत न करना, पुनः प्राप्त करने योग्य सर्वर अवस्था को बनाए न रखना) ही है जो दृढ़ता को मजबूत बनाता है न कि कठिन-निदान बग का स्रोत।