Zakaj je nespremenljivost (immutability) pomembna pri upravljanju stanja?

Question

Accepted Answer

**Nespremenljivost (immutability)** pomeni, da stanja nikoli ne spreminjate na mestu — namesto tega ustvarite **nov** objekt/niz s spremembami. To je osrednje pri tem, kako React, Redux in podobna orodja zaznajo spremembe in pravilno posodobijo uporabniški vmesnik.

## Problem s spreminjanjem stanja

```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 (in Redux) zaznavajo spremembe s primerjavo **referenc** (`oldState === newState`), ne z globokim primerjanjem vsebine — iz razlogov zmogljivosti. Če spremenite stanje na mestu, referenca ostane enaka, zato ogrodje misli, da se nič ni spremenilo, in preskoči ponovno upodobitev.

## Vzorci nespremenljivih posodobitev

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

Operator razširitve (spread operator) ustvari plitve kopije; za ugnezdene podatke kopirate vsako raven, ki jo spremenite.

## Zakaj nespremenljivost prinaša več koristi

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

## Orodja, ki pomagajo

```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 naredi ugnezdene nespremenljive posodobitve ergonomske, saj vam omogoča, da napišete kodo, ki izgleda kot spremenjevanje, na osnutku, ki ga pretvori v nespremenljivo posodobitev.

## Zakaj je to pomembno

Nespremenljivost je mehanizem, ki omogoči, da zaznavanja sprememb, ki temelji na referencah, deluje — to je razlog, *zakaj* `[...items]` sproži ponovno upodobitev, vendar `items.push()` ne.

Poleg korektnosti omogoča optimizacije zmogljivosti (memoizacija primerja reference) in zmogljive funkcionalnosti (undo/redo, potovanje skozi čas).

Razumevanje vzorcev nespremenljivih posodobitev (in orodij, kot je Immer) je bistveno za pravilno delo s React/Redux; spreminjanje stanja je ena najpogostejših napak začetnikov.