Zašto je nepromjenjivost važna u upravljanju stanjem?

Question

Accepted Answer

**Nepromjenjivost** znači da nikada ne mijenjate stanje na mjestu — umjesto toga, kreirate **novi** objekt/niz sa promjenama. Ovo je temeljno kako React, Redux i slični alati detektuju promjene i ispravno ažuriraju korisničko sučelje.

## Problem s mutacijom

```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 (i Redux) detektuju promjene tako što uspoređuju **reference** (`oldState === newState`), ne duboke sadržaje — radi performansi. Ako mutirate na mjestu, referenca ostaje ista, pa framework mislidi da se ništa nije promijenilo i preskaču ponovno iscrtavanje.

## Nepromjenjivi obrasci ažuriranja

```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 spread kreira plitke kopije; za ugniježđene podatke kopirate svaku razinu koju mijenjate.

## Zašto nepromjenjivost donosi više prednosti

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

## Alati koji pomažu

```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 čini ugniježđene nepromjenjive ažuriranja ergonomskim omogućavajući vam pisanje koda koji izgleda kao mutacija na naczrtu koji pretvara u nepromjenjivo ažuriranje.

## Zašto je to važno

Nepromjenjivost je mehanizam koji čini detekciju promjena baziranu na referencama — *zato* `[...items]` pokreće ponovno iscrtavanje ali `items.push()` ne.

Izvan ispravljanja, otkljućava optimizacije performansi (memoizacija uspoređuje reference) i moćne značajke (poništi/ponovi, putovanje kroz vrijeme).

Razumijevanje nepromjenjivih obrazaca ažuriranja (i alata kao Immer) je neophodno za ispravno rada sa React/Redux; mutacija stanja je jedan od najčešćih početnički grešaka.