Varför är oföränderlighet (immutability) viktigt i tillståndshantering?

Question

Accepted Answer

**Oföränderlighet** betyder att man aldrig modifierar tillståndet på plats — istället skapar man ett **nytt** objekt/array med ändringarna. Detta är centralt för hur React, Redux och liknande verktyg detekterar ändringar och uppdaterar användargränssnittet korrekt.

## Problemet med mutation

```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 (och Redux) detekterar ändringar genom att jämföra **referenser** (`oldState === newState`), inte djupa innehål — för prestanda. Om du muterar på plats förblir referensen densamma, så ramverket tror att ingenting har förändrats och hoppar över omrendringen.

## Oföränderliga uppdateringsmönster

```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-operatorn skapar grunda kopior; för kapslade data kopierar du varje nivå du ändrar.

## Varför oföränderlighet ger fler fördelar

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

## Verktyg som hjälper

```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 gör kapslade oföränderliga uppdateringar ergonomiska genom att låta dig skriva kod som ser ut som mutation på ett utkast som den konverterar till en oföränderlighet uppdatering.

## Varför det spelar roll

Oföränderlighet är mekanismen som gör referensbaserad ändringsdetektering möjlig — det är *därför* `[...items]` utlöser en omrendering men `items.push()` inte gör det.

Beyond korrekhet, det låser upp prestandaoptimieringar (memoization jämför referenser) och kraftfulla funktioner (ångra/gör om, tidsresor).

Att förstå oföränderliga uppdateringsmönster (och verktyg som Immer) är väsentligt för att arbeta korrekt med React/Redux; att mutera tillståndet är en av de vanligaste nybörjarbuggarna.