Ce sunt selectorii și memoizarea în gestionarea stării?

Question

Accepted Answer

Un **selector** este o funcție care **citește (derivă) o anumită bucată de date din stare**. **Memoizarea** stochează în cache rezultatul unui selector, astfel încât acesta se recalculează doar atunci când intrările sale se schimbă — important pentru performanță când selectorii fac lucrări costisitoare sau pentru a evita re-randări inutile.

## Selectorii de bază — încapsulează accesul la stare

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

Selectorii centralizează cunoașterea structurii stării — componentele cer `selectCartTotal(state)` fără a ști unde/cum este stocat, deci dacă forma stării se schimbă, actualizezi un selector, nu fiecare componentă.

## Problema: selectorii derivați se recalculează la fiecare apel

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

Un selector care creează un nou array/obiect returnează o **nouă referință** la fiecare apel — ceea ce poate declanșa re-randări inutile (React vede o valoare "nouă") și risipește calculele.

## Soluția: selectorii memoizați (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` stochează rezultatul în cache și re-execută doar calculul costisitor atunci când intrările sale (`state.items`) se schimbă de fapt — în caz contrar, returnează **aceeași referință**, prevenind atât recalcularea, cât și re-randările în aval.

## Compunerea selectorilor

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

Selectorii se compun, construind derivații complexe din bucăți simple, stocate individual în cache.

## De ce contează

Selectorii decuplează componentele de forma stării (o victorie în mentenabilitate) și oferă un loc pentru a exprima date derivate.

Memoizarea face ca selectorii derivați să fie eficienți — evitând recalcularea repetată și scumpă și, crucial, returnând referințe stabile, astfel încât componentele conectate să nu fie re-randare în mod inutil.

În aplicațiile Redux/NgRx, selectorii memoizați (Reselect/`createSelector`) sunt un instrument cheie de performanță și arhitectură; aceeași idee de cache apare ca `useMemo` și `computed` în alte locuri.