Hvad er selektorer og memoization i state management?

Question

Accepted Answer

En **selektor** er en funktion, der **læser (udleder) en specifik del af data fra state**. **Memoization** cachelagrer en selektors resultat, så den kun genberegnes, når dens input ændres — vigtig for ydeevne, når selektorer udfører dyr arbejde, eller for at undgå unødvendige re-renders.

## Basale selektorer — indkapsler state-adgang

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

Selektorer centraliserer viden om state-strukturen — komponenter anmoder `selectCartTotal(state)` uden at vide hvor/hvordan det gemmes, så hvis state-formen ændres, opdaterer du én selektor, ikke alle komponenter.

## Problemet: afledt selektorer genberegnes ved hvert kald

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

En selektor, der opretter et nyt array/objekt, returnerer en **ny reference** ved hvert kald — hvilket kan udløse unødvendige re-renders (React ser en "ny" værdi) og spilder beregning.

## Løsningen: memoized selektorer (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` cachelagrer resultatet og kører kun den dyre beregning igen, når dens inputs (`state.items`) faktisk ændres — ellers returnerer den **samme reference**, hvilket forhindrer både genberegning og downstream re-renders.

## Komponering af selektorer

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

Selektorer komponeres og bygger komplekse aflstninger fra simple, individuelt-cachelagrede dele.

## Hvorfor det betyder noget

Selektorer afkoblet komponenter fra state-formen (en vedligeholdelses sejr) og giver ét sted at udtrykke afledt data.

Memoization gør afledt selektorer effektive — undgår gentagen dyr beregning og afgørende returnerer stabile referencer, så forbundne komponenter ikke re-rendres unødigt.

I Redux/NgRx-apps er memoized selektorer (Reselect/`createSelector`) et nøgle-ydeevne- og arkitektur-værktøj; samme caching-idé optræder som `useMemo` og `computed` andre steder.