Hvorfor er immutabilitet viktig i state management?

Question

Accepted Answer

**Immutabilitet** betyr aldri å endre state på plass — i stedet oppretter du et **nytt** objekt/array med endringene. Dette er sentralt for hvordan React, Redux og lignende verktøy oppdager endringer og oppdaterer brukergrensesnittet riktig.

## Problemet med mutasjon

```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 (og Redux) oppdager endringer ved å sammenligne **referanser** (`oldState === newState`), ikke dypt innhold — for ytelse. Hvis du muterer på plass, forblir referansen den samme, så rammeverket tror at ingenting har endret seg og hopper over re-render.

## Immutable update-mønstre

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

Spread-operatøren oppretter grunne kopier; for nestede data kopierer du hvert nivå du endrer.

## Hvorfor immutabilitet gir flere fordeler

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

## Verktøy som hjelper

```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 gjør nestede immutable updates ergonomiske ved å la deg skrive mutasjonslignende kode på et utkast som det konverterer til en immutable oppdatering.

## Hvorfor det er viktig

Immutabilitet er mekanismen som gjør referansebasert endring oppdagelse mulig — det er *hvorfor* `[...items]` utløser en re-render, men `items.push()` gjør det ikke.

Utover riktighetens viktighet, låser det opp ytelsesoptimaliseringer (memoization sammenligner referanser) og kraftige funksjoner (undo/redo, time-travel).

Å forstå immutable update-mønstre (og verktøy som Immer) er essensielt for å jobbe riktig med React/Redux; å mutere state er en av de vanligste nybegynnerfeilene.