நீங்கள் நிலையை எவ்வாறு நிலைத்திருத்தி மற்றும் நீர்மமாக்குவீர்கள்?

Question

Accepted Answer

**நிலைத்திருத்துதல்** என்பது நிலையை சேமிப்பகத்தில் (localStorage, IndexedDB, ஒரு backend) சேமிப்பது, இதனால் இது பக்க மறுஆரம்பங்கள் அல்லது அமர்வுகள் உயிர்வாழ்கின்றன; **நீர்மமாக்குதல்** என்பது தொடக்கத்தில் அதை மீண்டும் பயன்பாட்டுக்குள் ஏற்றுவதை அர்த்தம். கார்ட்கள், அங்கீகார டோக்கன்கள், ব்যবহারकாரी விருப்பங்கள் மற்றும் வரைவு படிவங்களுக்கு பொதுவானது.

## 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 க்கு பாதுகாப்பு, திட்டத்தை பதிப்பு, ரகசியங்களை பாதுகாப்பாக வேண்டாம், மீண்டும் பெறக்கூடிய சேவையக நிலையை நிலைத்திருத்தாதீர்கள்) என்பது நிலைத்திருத்துதலை வலுவாக மாற்றுவது, கடினமாக-நির்ணயிக்கக்கூடிய பிழைகளின் மூலமாக இல்லை.