لماذا تعتبر عدم القابلية للتغيير مهمة في إدارة الحالة؟

Question

Accepted Answer

**عدم القابلية للتغيير** (Immutability) يعني عدم تعديل الحالة في مكانها مباشرة — بدلاً من ذلك، تنشئ كائن/مصفوفة **جديدة** تحتوي على التغييرات. هذا أساسي لكيفية قيام React و Redux والأدوات المشابهة بكشف التغييرات وتحديث واجهة المستخدم بشكل صحيح.

## المشكلة مع التعديل المباشر

```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`)، وليس المحتويات العميقة — من أجل الأداء. إذا عدّلت في مكانها، تبقى المرجعية كما هي، لذلك يعتقد الإطار أن شيئاً لم يتغير وتخطي إعادة التصيير.

## أنماط التحديث غير القابل للتغيير

```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) ينشئ نسخاً سطحية؛ بالنسبة للبيانات المتداخلة عليك نسخ كل مستوى تغيره.

## لماذا توفر عدم القابلية للتغيير فوائد أكثر

```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 يجعل التحديثات غير القابلة للتغيير المتداخلة عملية بسهولة بالسماح لك بكتابة كود يبدو وكأنه يعدّل بشكل مباشر على مسودة يحولها إلى تحديث غير قابل للتغيير.

## لماذا يهم

عدم القابلية للتغيير هو الآلية التي تجعل كشف التغيير المبني على المراجع يعمل — إنه *السبب* في أن `[...items]` يؤدي لإعادة تصيير بينما `items.push()` لا يفعل.

بعيداً عن الصحة، فهو يفتح تحسينات الأداء (المذكرات تقارن المراجع) والميزات القوية (التراجع/الإعادة، السفر الزمني).

فهم أنماط التحديث غير القابل للتغيير (والأدوات مثل Immer) ضروري للعمل بشكل صحيح مع React/Redux؛ تعديل الحالة مباشرة هو أحد أكثر الأخطاء الشائعة بين المبتدئين.