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

Question

IT Interview Practice · 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؛ تعديل الحالة مباشرة هو أحد أكثر الأخطاء الشائعة بين المبتدئين.

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

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

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

الأدوات المساعدة

لماذا يهم

أسئلة ذات صلة