Hva er selectors og memoization i state management?

Question

IT Interview Practice · Accepted Answer

En **selector** er en funksjon som **leser (utleder) et bestemt stykke data fra tilstanden**. **Memoization** cacher en selektors resultat slik at det bare blir omberegnet når inngangene endres — viktig for ytelse når selektorer gjør dyrt arbeid eller for å unngå unødvendige re-renderings.

## Grunnleggende selectors — innkapsler tilstandstilgang

```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 sentraliserer kunnskap om tilstandsstrukturen — komponenter spør `selectCartTotal(state)` uten å vite hvor/hvordan det lagres, så hvis tilstandsformen endres, oppdaterer du én selector, ikke hver komponent.

## Problemet: utledede selectors beregner på nytt ved hver kall

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

En selector som lager en ny matrise/objekt returnerer en **ny referanse** ved hver kall — noe som kan utløse unødvendige re-renderings (React ser en "ny" verdi) og sløser beregning.

## Løsningen: memoiserte 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` cacher resultatet og kjører bare den dyre beregningen på nytt når inngangene (`state.items`) faktisk endres — ellers returnerer det **samme referanse**, noe som forhindrer både omberegning og nedstrøms re-renderings.

## Komponering av selectors

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

Selectors komponeres, som bygger komplekse utledninger fra enkle, individuelt cachede stykker.

## Hvorfor det betyr noe

Selectors frigjør komponenter fra tilstandens form (en vedlikeholdsgevinst) og gir ett sted å uttrykke utledede data.

Memoization gjør utledede selectors effektive — unngår gjentatt dyrt arbeid og, avgjørende, returnerer stabile referanser slik at tilkoblede komponenter ikke re-renderes unødvendig.

I Redux/NgRx-apper er memoiserte selectors (Reselect/`createSelector`) et nøkkelverktøy for ytelse og arkitektur; samme caching-idé vises som `useMemo` og `computed` andre steder.

Grunnleggende selectors — innkapsler tilstandstilgang

Problemet: utledede selectors beregner på nytt ved hver kall

Løsningen: memoiserte selectors (Reselect)

Komponering av selectors

Hvorfor det betyr noe

Relaterte spørsmål