Waarom is immutabiliteit belangrijk in state management?

Question

Accepted Answer

**Immutability** betekent nooit state op plaats aan te passen — in plaats daarvan maakt u een **nieuw** object/array met de wijzigingen. Dit is centraal voor hoe React, Redux en vergelijkbare tools veranderingen detecteren en de UI correct bijwerken.

## Waarom het belangrijk is

```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 (en Redux) detecteren veranderingen door **verwijzingen** (`oldState === newState`) te vergelijken, niet diepe inhoud — voor prestaties. Als u op plaats muteert, blijft de verwijzing hetzelfde, dus het framework denkt dat niets is veranderd en slaat de re-render over.

## Immutable update patronen

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

De spread-operator maakt ondiepe kopieën; voor geneste data kopieert u elk niveau dat u wijzigt.

## Hoe immutabiliteit meer voordelen oplevert

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

## Hulpmiddelen die helpen

```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 maakt geneste immutable updates ergonomisch door u mutatielooking code op een draft te laten schrijven die het converteert naar een immutable update.

## Waarom het belangrijk is

Immutabiliteit is het mechanisme dat change detection op basis van verwijzingen werkend maakt — het is *waarom* `[...items]` een re-render triggert maar `items.push()` niet.

Bovendien maakt het prestatieoptimalisaties (memoization vergelijkt verwijzingen) en krachtige functies (undo/redo, time-travel) mogelijk.

Het begrijpen van immutable update patronen (en tools zoals Immer) is essentieel voor correct werken met React/Redux; state muteren is een van de meest voorkomende beginnerfouten.