राज्य व्यवस्थापनमा अपरिवर्तनीयता किन महत्त्वपूर्ण छ?

Question

Accepted Answer

**Immutability** को अर्थ हो राज्यलाई कहिले पनि सीधै परिवर्तन नगर्नु — यसको सट्टा, तपाईंले परिवर्तनहरूसँग **नयाँ** 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`) तुलना गरेर परिवर्तनहरू पत्ता लगाउँछन्, गहिरो सामग्री होइन — कार्यक्षमताको लागि। यदि तपाईंले सीधै परिवर्तन गर्नुहुन्छ भने, सन्दर्भ समान रहन्छ, त्यसैले ढाँचा सोच्छ कि केही परिवर्तन भएको छैन र पुनः-रेन्डर छोड्छ।

## अपरिवर्तनीय अद्यावधिक ढाँचाहरू

```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 सँग सही तरिकाले काम गर्नको लागि आवश्यक छ; राज्य परिवर्तन गर्नु सबै भन्दा सामान्य शुरुवातकर्ता बग हो।