Pourquoi l'immutabilité est-elle importante dans la gestion d'état ?

Question

Accepted Answer

**L'immutabilité** signifie ne jamais modifier l'état en place — à la place, vous créez un **nouvel** objet/tableau avec les modifications. C'est central à la façon dont React, Redux et outils similaires détectent les changements et mettent à jour l'interface utilisateur correctement.

## Le problème avec la 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 (et Redux) détectent les changements en comparant les **références** (`oldState === newState`), pas les contenus profonds — pour la performance. Si vous mutez sur place, la référence reste la même, donc le framework pense que rien n'a changé et saute le re-rendu.

## Modèles de mise à jour immuables

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

L'opérateur spread crée des copies superficielles ; pour les données imbriquées, vous copiez chaque niveau que vous modifiez.

## Pourquoi l'immutabilité apporte plus d'avantages

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

## Outils qui aident

```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 rend les mises à jour immuables imbriquées ergonomiques en vous permettant d'écrire du code apparemment mutant sur un brouillon qu'il convertit en une mise à jour immuable.

## Pourquoi c'est important

L'immutabilité est le mécanisme qui fait fonctionner la détection de changement basée sur les références — c'est *pourquoi* `[...items]` déclenche un re-rendu mais `items.push()` ne le fait pas.

Au-delà de la correction, cela déverrouille des optimisations de performance (la mémoïsation compare les références) et des fonctionnalités puissantes (annuler/refaire, voyage dans le temps).

Comprendre les modèles de mise à jour immuables (et des outils comme Immer) est essentiel pour travailler correctement avec React/Redux ; muter l'état est l'un des bugs les plus courants chez les débutants.