Que sont les sélecteurs et la mémoïsation dans la gestion d'état ?

Question

Accepted Answer

Un **sélecteur** est une fonction qui **lit (dérive) une données spécifique de l'état**. La **mémoïsation** met en cache le résultat d'un sélecteur afin qu'il ne se recalcule que lorsque ses entrées changent — important pour la performance lorsque les sélecteurs effectuent un travail coûteux ou pour éviter des re-rendus inutiles.

## Les sélecteurs de base — encapsulez l'accès à l'état

```js
// a selector knows HOW to pull a value out of the state shape
const selectUser = state => state.user;
const selectCartItems = state => state.cart.items;
const selectCartTotal = state =>
  state.cart.items.reduce((sum, i) => sum + i.price, 0); // derived
```

Les sélecteurs centralisent la connaissance de la structure d'état — les composants demandent `selectCartTotal(state)` sans savoir où/comment c'est stocké, donc si la forme de l'état change, vous mettez à jour un sélecteur, pas tous les composants.

## Le problème : les sélecteurs dérivés se recalculent à chaque appel

```js
const selectExpensiveList = state =>
  state.items.filter(i => i.active).sort(compareFn); // runs EVERY time, even if items didn't change
```

Un sélecteur qui crée un nouveau tableau/objet retourne une **nouvelle référence** à chaque appel — ce qui peut déclencher des re-rendus inutiles (React voit une valeur « nouvelle ») et gaspille le calcul.

## La solution : les sélecteurs mémoïsés (Reselect)

```js
import { createSelector } from "reselect"; // or RTK's createSelector

const selectActiveSorted = createSelector(
  [state => state.items],                       // input selector(s)
  (items) => items.filter(i => i.active).sort(compareFn) // recompute ONLY if items changed
);
```

`createSelector` met en cache le résultat et ne réexécute le calcul coûteux que lorsque ses entrées (`state.items`) changent réellement — sinon il retourne la **même référence**, prévenant à la fois le recalcul et les re-rendus en aval.

## Composer les sélecteurs

```js
const selectTotal = createSelector(
  [selectActiveSorted, selectTaxRate],          // build on other selectors
  (items, rate) => items.reduce((s, i) => s + i.price, 0) * (1 + rate)
);
```

Les sélecteurs se composent, construisant des dérivations complexes à partir de pièces simples, individuellement cachées.

## Pourquoi c'est important

Les sélecteurs découplent les composants de la forme de l'état (une victoire en termes de maintenabilité) et fournissent un endroit pour exprimer les données dérivées.

La mémoïsation rend les sélecteurs dérivés efficaces — en évitant les calculs coûteux répétés et, de manière cruciale, en retournant des références stables afin que les composants connectés ne se re-rendus inutilement.

Dans les applications Redux/NgRx, les sélecteurs mémoïsés (Reselect/`createSelector`) sont un outil clé de performance et d'architecture ; l'même idée de mise en cache apparaît comme `useMemo` et `computed` ailleurs.