ریاست کی تدبیر میں عدم تبدیلی (Immutability) کیوں اہم ہے؟

Question

Accepted Answer

**عدم تبدیلی (Immutability)** کا مطلب ہے کہ state کو براہ راست ترمیم نہ کریں — بلکہ، آپ تبدیلیوں کے ساتھ ایک **نیا** object/array بنائیں۔ یہ React، Redux، اور اسی طرح کے ٹولز میں تبدیلیوں کو معلوم کرنے اور UI کو صحیح طریقے سے اپ ڈیٹ کرنے کے طریقے کے لیے بنیادی ہے۔

## اعمال کے ذریعے تبدیلی کا مسئلہ

```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) **حوالہ جات** (`oldState === newState`) کا موازنہ کر کے تبدیلیوں کو معلوم کرتے ہیں، گہری مواد نہیں — کارکردگی کے لیے۔ اگر آپ براہ راست ترمیم کریں، تو حوالہ جات وہی رہتا ہے، اس لیے framework سوچتا ہے کہ کچھ نہیں بدلا اور دوبارہ رینڈر کو چھوڑ دیتا ہے۔

## عدم تبدیلی سے اپ ڈیٹ کے نمونے

```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 سطحی نقول بناتا ہے؛ nested ڈیٹا کے لیے آپ ہر سطح کو جو آپ تبدیل کرتے ہیں نقل کرتے ہیں۔

## عدم تبدیلی کیوں زیادہ فوائد لاتی ہے

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

## ٹولز جو مدد کرتے ہیں

```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 nested عدم تبدیلی کی تبدیلیوں کو آرام دہ بناتا ہے کیونکہ یہ آپ کو ایک draft پر اعمال جیسی کوڈ لکھنے دیتا ہے جو وہ عدم تبدیلی سے متعلق اپ ڈیٹ میں تبدیل کرتا ہے۔

## اہمیت

عدم تبدیلی وہ طریقہ ہے جو حوالہ جات پر مبنی تبدیلی کی شناخت کو کام کرتا ہے — یہ ہے کہ `[...items]` دوبارہ رینڈر کو متحرک کرتا ہے لیکن `items.push()` نہیں۔

درستگی سے آگے، یہ کارکردگی کی تشکیل (memoization حوالہ جات کا موازنہ کرتا ہے) اور طاقتور خصوصیات (undo/redo، time-travel) کو کھول دیتا ہے۔

عدم تبدیلی سے اپ ڈیٹ کے نمونوں کو سمجھنا (اور Immer جیسے ٹولز) React/Redux کے ساتھ صحیح طریقے سے کام کرنے کے لیے ضروری ہے؛ state کو تبدیل کرنا ایک سب سے عام ابتدائی غلطی ہے۔