स्टेट प्रबंधन में अपरिवर्तनीयता महत्वपूर्ण क्यों है?

Question

Accepted Answer

**अपरिवर्तनीयता** का मतलब है कि आप स्थान पर स्टेट को कभी संशोधित नहीं करते — इसके बजाय, आप परिवर्तनों के साथ एक **नया** ऑब्जेक्ट/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`) की तुलना करके परिवर्तनों का पता लगाते हैं, गहरी सामग्री नहीं — प्रदर्शन के लिए। यदि आप स्थान पर मिउटेट करते हैं, तो संदर्भ समान रहता है, इसलिए फ्रेमवर्क सोचता है कि कुछ भी नहीं बदला है और रीरेंडर को छोड़ देता है।

## अपरिवर्तनीय अपडेट पैटर्न

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

स्प्रेड ऑपरेटर उथली प्रतियां बनाता है; नेस्टेड डेटा के लिए आप प्रत्येक स्तर की कॉपी करते हैं जिसे आप बदलते हैं।

## अपरिवर्तनीयता अधिक लाभ क्यों लाती है

```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 नेस्टेड अपरिवर्तनीय अपडेट को ergonomic बनाता है जिससे आप एक ड्राफ्ट पर मिउटेशन जैसा दिखने वाला कोड लिख सकते हैं जिसे यह अपरिवर्तनीय अपडेट में परिवर्तित करता है।

## यह महत्वपूर्ण क्यों है

अपरिवर्तनीयता वह तंत्र है जो संदर्भ-आधारित परिवर्तन पहचान को काम करता है — यह *क्यों* है कि `[...items]` एक रीरेंडर को ट्रिगर करता है लेकिन `items.push()` नहीं।

सही होने के अलावा, यह प्रदर्शन अनुकूलन (memoization संदर्भों की तुलना करता है) और शक्तिशाली सुविधाओं (undo/redo, time-travel) को अनलॉक करता है।

अपरिवर्तनीय अपडेट पैटर्न को समझना (और Immer जैसे उपकरण) React/Redux के साथ सही तरीके से काम करने के लिए आवश्यक है; स्टेट को मिउटेट करना शुरुआती लोगों की सबसे आम गलतियों में से एक है।