Czym są selektory i memoizacja w zarządzaniu stanem?

Question

Accepted Answer

**Selektor** to funkcja, która **czyta (wyprowadza) konkretny fragment danych ze stanu**. **Memoizacja** buforuje wynik selektora, aby był przeliczany tylko wtedy, gdy zmienią się jego dane wejściowe — ważne dla wydajności, gdy selektory wykonują dużo pracy lub aby uniknąć niepotrzebnych re-renderowań.

## Podstawowe selektory — enkapsulują dostęp do stanu

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

Selektory centralizują wiedzę o strukturze stanu — komponenty pytają `selectCartTotal(state)` bez wiedzy, gdzie/jak jest przechowywany, więc jeśli zmieni się kształt stanu, aktualizujesz jeden selektor, a nie każdy komponent.

## Problem: pochodne selektory przeliczają się przy każdym wywołaniu

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

Selektor, który tworzy nową tablicę/obiekt, zwraca **nową referencję** przy każdym wywołaniu — co może wyzwolić niepotrzebne re-renderowania (React widzi "nową" wartość) i marnotrawić obliczenia.

## Rozwiązanie: zapamiętane selektory (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` buforuje wynik i ponownie uruchamia drogie obliczenia tylko wtedy, gdy jego dane wejściowe (`state.items`) faktycznie się zmieniają — w przeciwnym razie zwraca **tę samą referencję**, zapobiegając zarówno ponownym obliczeniom, jak i zbędnym re-rendowaniem w dół strumienia.

## Komponowanie selektorów

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

Selektory się komponują, budując złożone pochodne z prostych, indywidualnie buforowanych części.

## Dlaczego to ważne

Selektory oddzielają komponenty od kształtu stanu (wygrana w zakresie łatwości utrzymania) i zapewniają jedno miejsce do wyrażania danych pochodnych.

Memoizacja sprawia, że pochodne selektory są efektywne — unika powtarzających się kosztownych obliczeń i, co kluczowe, zwraca stabilne referencje, dzięki czemu połączone komponenty nie będą niepotrzebnie ponownie renderowane.

W aplikacjach Redux/NgRx zapamiętane selektory (Reselect/`createSelector`) są kluczowym narzędziem wydajności i architektury; ten sam pomysł buforowania pojawia się jako `useMemo` i `computed` w innych miejscach.