State management-இல் immutability ஏன் முக்கியம்?

Question

Accepted Answer

**Immutability** என்பது state-ஐ அதே இடத்தில் (in place) மாற்றாமல் இருப்பது — அதற்கு பதிலாக, மாற்றங்களுடன் ஒரு **புதிய** object/array-ஐ உருவாக்குகிறீர்கள். React, Redux மற்றும் இது போன்ற tools மாற்றங்களைக் கண்டறிந்து UI-ஐ சரியாக update செய்வதற்கு இது மையமாக உள்ளது.

## Mutate செய்வதில் உள்ள பிரச்சினை

```jsx
// ❌ mutating — React doesn't detect the change
function addItem(item) {
  items.push(item);   // same array reference → React sees "no change" → no re-render
  setItems(items);    // passing the same reference back
}

// ✅ immutable — a NEW array, new reference → React re-renders
function addItem(item) {
  setItems([...items, item]); // create a new array
}
```

React (மற்றும் Redux) மாற்றங்களை **references**-ஐ ஒப்பிட்டு (`oldState === newState`) கண்டறிகின்றன, ஆழமான content-ஐ அல்ல — performance-க்காக. நீங்கள் அதே இடத்தில் mutate செய்தால், reference அப்படியே இருக்கும், எனவே framework எதுவும் மாறவில்லை என்று நினைத்து re-render-ஐ தவிர்த்துவிடும்.

## Immutable update patterns

```js
// arrays
setItems([...items, newItem]);                  // add
setItems(items.filter(i => i.id !== id));        // remove
setItems(items.map(i => i.id === id ? { ...i, done: true } : i)); // update one

// objects
setUser({ ...user, name: "Bob" });               // update a field
setUser({ ...user, address: { ...user.address, city: "NY" } }); // nested update
```

Spread operator shallow copy-களை உருவாக்குகிறது; nested data-க்கு நீங்கள் மாற்றும் ஒவ்வொரு level-ஐயும் copy செய்கிறீர்கள்.

## Immutability ஏன் அதிக நன்மைகளைத் தருகிறது

```text
✓ Reliable change detection → correct, efficient re-renders (reference equality)
✓ Enables performance optimizations (React.memo, OnPush, useMemo) that compare references
✓ Predictable state — old state is never altered, easing debugging
✓ Time-travel debugging & undo/redo (keep past state snapshots)
```

## உதவும் Tools

```js
// Immer (used by Redux Toolkit) lets you "mutate" a draft → produces an immutable result
produce(state, draft => { draft.items.push(item); }); // safe + readable
```

Immer ஒரு draft-இல் mutate செய்வது போல் தோன்றும் code-ஐ எழுத அனுமதிப்பதன் மூலம் nested immutable updates-ஐ எளிதாக்குகிறது, அதை அது ஒரு immutable update-ஆக மாற்றுகிறது.

## இது ஏன் முக்கியம்

Reference-அடிப்படையிலான change detection வேலை செய்வதற்கான வழிமுறையே immutability — `[...items]` ஒரு re-render-ஐ trigger செய்கிறது ஆனால் `items.push()` செய்யாது என்பதற்கான *காரணம்* இதுவே.

Correctness-ஐத் தாண்டி, இது performance optimizations-ஐ (memoization references-ஐ ஒப்பிடுகிறது) மற்றும் சக்திவாய்ந்த features-ஐ (undo/redo, time-travel) திறக்கிறது.

Immutable update patterns-ஐ (மற்றும் Immer போன்ற tools-ஐ) புரிந்துகொள்வது React/Redux-உடன் சரியாக வேலை செய்வதற்கு அத்தியாவசியம்; state-ஐ mutate செய்வது மிகவும் பொதுவான beginner bugs-களில் ஒன்று.