Vad är selektorer och memoization i tillståndshantering?

Question

Accepted Answer

En **selektor** är en funktion som **läser (härleder) en specifik datadelar från tillståndet**. **Memoization** cachelagrar en selektors resultat så att den endast omberäknas när dess inmatningar ändras — viktigt för prestanda när selektorer utför dyr arbete eller för att undvika onödiga omåtergivningar.

## Grundläggande selektorer — kapsla in tillståndsåtkomst

```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 centraliserar kunskap om tillståndets struktur — komponenter frågar `selectCartTotal(state)` utan att veta var/hur det lagras, så om tillståndsformen ändras uppdaterar du en selektor, inte varje komponent.

## Problemet: härledda selektorer omberäknas vid varje anrop

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

En selektor som skapar en ny array/objekt returnerar en **ny referens** vid varje anrop — vilket kan utlösa onödiga omåtergivningar (React ser ett "nytt" värde) och slösar beräkning.

## Lösningen: memoizerad 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` cachelagrar resultatet och kör bara den dyra beräkningen igen när dess inmatningar (`state.items`) faktiskt ändras — annars returnerar den **samma referens**, vilket förhindrar både omberäkning och nedströmspåverkade omåtergivningar.

## Sammansättning av selektorer

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

Selektorer komponeras, vilket bygger komplexa härledningar från enkla, individuellt cachelagrade bitar.

## Varför det är viktigt

Selektorer frikopplar komponenter från tillståndets form (en vinstig för underhållbarhet) och tillhandahåller en plats för att uttrycka härledda data.

Memoization gör härledda selektorer effektiva — undviker upprepad dyr beräkning och returnerar på ett avgörande sätt stabila referenser så anslutna komponenter inte omåterges onödigt.

I Redux/NgRx-appar är memoizerad selektorer (Reselect/`createSelector`) ett nyckelverktyg för prestanda och arkitektur; samma cachingidé förekommer som `useMemo` och `computed` på andra håll.