स्टेट मॅनेजमेंटमध्ये अपरिवर्तनशीलता का महत्वाची आहे?

Question

Accepted Answer

**अपरिवर्तनशीलता** म्हणजे स्टेटला कधीही जागेवर बदलू नका — त्याऐवजी, तुम्ही बदलांसह एक **नवीन** ऑब्जेक्ट/अ्ऍरे तयार करता. हे 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 nेस्टेड अपरिवर्तनीय अपडेट ergonomic करते ज्याएकरिता तुम्हाला म्युटेशन दिसत असे कोड ड्राफ्टवर लिहिणे देते ज्याला ते अपरिवर्तनीय अपडेटमध्ये रूपांतरित करते.

## ते का महत्वाचे आहे

अपरिवर्तनशीलता ही यंत्रणा आहे जी संदर्भ-आधारित बदल शोधून काढणे कार्य करते — हे *कारण* आहे की `[...items]` पुन:रेंडरिंग ट्रिगर करते परंतु `items.push()` नाही.

अचूकतेच्या पलीकडे, हे कार्यक्षमता अनुकूलन (memoization संदर्भ तुलना करते) आणि शक्तिशाली वैशिष्ट्य (undo/redo, time-travel) अनलॉक करते.

अपरिवर्तनीय अपडेट पॅटर्न समजून घेणे (आणि Immer सारखी साधने) React/Redux सह योग्यरित्या कार्य करण्यासाठी आवश्यक आहे; state चे म्युटेशन हे शिकणाऱ्यांचा सर्वात सामान्य बग आहे.