మీరు స్థితిని ఎలా సంరక్షించి మరియు హైడ్రేట్ చేస్తారు?

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 కు రక్షణ, స్కీమా సంస్కరణ, రహస్యాలను సురక్షితంగా సংరక్షించవద్దు, పున్న ఫెచ్చ చేయుటకు సర్వర్ స్థితిని సంరక్షించవద్దు) సంరక్షణను దృఢమైనదిగా చేస్తుంది, కష్టంగా-నిర్ధారించిన బగ్‌ల మూలం కాదు.