Qu'est-ce que l'état dérivé et pourquoi faut-il éviter de le dupliquer ?

Question

Accepted Answer

**L'état dérivé** est toute valeur que vous pouvez **calculer à partir de l'état existant** plutôt que de la stocker séparément. Le principe : si vous pouvez la calculer, ne la stockez pas — dérivez-la à chaque rendu. Stocker des valeurs dérivables les invite à se désynchroniser.

## L'anti-pattern : stocker ce que vous pouvez calculer

```jsx
// ❌ storing a derived value as separate state
function Cart() {
  const [items, setItems] = useState([]);
  const [total, setTotal] = useState(0); // DUPLICATE — derivable from items

function addItem(item) {
    setItems([...items, item]);
    setTotal(total + item.price); // must remember to update total too — easy to forget 🐛
  }
}
```

Maintenant `total` est une deuxième copie d'informations déjà présentes dans `items`. Chaque modification de `items` doit *aussi* mettre à jour `total`, et au moment où vous en oubliez une (une suppression, un changement de quantité), ils ne correspondent plus et l'UI affiche le mauvais total.

## La solution : la dériver au rendu

```jsx
// ✅ compute total from items — always correct, never out of sync
function Cart() {
  const [items, setItems] = useState([]);
  const total = items.reduce((sum, i) => sum + i.price, 0); // derived each render

function addItem(item) {
    setItems([...items, item]); // ONE update; total recomputes automatically
  }
}
```

Avec `total` dérivé, il n'y a rien de supplémentaire à garder en sync — modifiez `items` et le total est toujours correct.

## Mémoïsez seulement si le calcul est coûteux

```jsx
const sortedFiltered = useMemo(
  () => items.filter(i => i.active).sort(compareFn), // expensive derivation
  [items]                                            // recompute only when items change
);
```

Pour les dérivations lourdes (filtres/tris volumineux), `useMemo`/`computed`/selectors mettent en cache le résultat pour qu'il ne se recalcule que si les dépendances changent — mais c'est toujours *dérivé*, pas stocké comme état indépendant.

## Valeurs dérivées courantes

```text
Totals/counts, filtered or sorted lists, fullName from first+last,
isValid from form fields, formatted/displayed strings, "is everything selected?"
```

## Pourquoi c'est important

Ne pas dupliquer l'état dérivé est une application directe de la source unique de vérité — cela élimine toute une classe de bugs où les copies se désynchronisent.

La règle « dériver, ne pas stocker » garde votre état minimal et votre UI cohérente par construction.

Reconnaître ce qui est dérivable (et recourir à `useMemo`/computed/selectors seulement pour la performance, jamais pour créer une deuxième source de vérité) est la marque d'une conception d'état propre et résistante aux bugs.