Wat zijn selectors en memoization in state management?

Question

Accepted Answer

Een **selector** is een functie die **een bepaald gegeven uit de state leest (afleidt)**. **Memoization** cacht het resultaat van een selector zodat het alleen opnieuw wordt berekend als de invoer verandert — belangrijk voor prestaties als selectors duur werk doen of om onnodige re-renders te voorkomen.

## Basic selectors — encapsulate state access

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

Selectors centraliseren kennis van de state-structuur — componenten vragen `selectCartTotal(state)` zonder te weten waar/hoe het wordt opgeslagen, dus als de state-vorm verandert, update je één selector in plaats van elk component.

## Het probleem: afgeleide selectors berekenen bij elke call opnieuw

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

Een selector die een nieuwe array/object aanmaakt, retourneert bij elke call een **nieuwe referentie** — wat onnodige re-renders kan triggeren (React ziet een "nieuwe" waarde) en berekening verspilt.

## De oplossing: gememoizeerde selectors (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` cacht het resultaat en voert de dure berekening alleen opnieuw uit wanneer de invoer (`state.items`) daadwerkelijk verandert — anders retourneert het **dezelfde referentie**, wat zowel herberekening als downstream re-renders voorkomt.

## Composing selectors

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

Selectors samenstellen, complexe afleidingen opbouwen uit eenvoudige, individueel gecachte stukken.

## Waarom het belangrijk is

Selectors ontkoppelen componenten van de vorm van de state (een voordeel voor onderhoud) en bieden één plaats om afgeleide gegevens uit te drukken.

Memoization maakt afgeleide selectors efficiënt — vermijdt herhaalde dure berekening en, cruciaal, retourneert stabiele referenties zodat verbonden componenten niet onnodig opnieuw worden gerenderd.

In Redux/NgRx-apps zijn gememoizeerde selectors (Reselect/`createSelector`) een belangrijk prestatie- en architectuurtool; dezelfde cacheringgedachte verschijnt als `useMemo` en `computed` elders.