X'inhu sselettori u memoization fl-istat management?

Question

Accepted Answer

A **sselettore** hu funzjoni li **taqra (titwettaq) biċċa speċifika ta' data mill-istat**. **Memoization** jakkesa r-riżultat ta' sselettore sabiex jerġa' jitħasba biss meta l-inputs tiegħu jinbidlu — importanti għal performance meta sselettori jagħmlu xogħol għali jew biex jipprevjeni re-renders mhux meħtieġa.

## Sselettori bażiċi — inkapsola l-aċċess tal-istat

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

Sselettori jċentralizzaw l-għarfien tar-struttura tal-istat — komponenti jistaqsu `selectCartTotal(state)` mingħajr ma jkunu jafx fejn/kif tinħażen, għalhekk jekk ir-rotta tal-istat tinbidel ixoqqoq sselettore wieħed, mhux kull komponent.

## Il-problema: sselettori derivati jerġgħu jiħsbu fuq kull sejħa

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

Sselettore li jinħoloq firxa/oġġett ġdid jirritorna referenza **ġdida** fuq kull sejħa — li tista' ttattiva re-renders mhux meħtieġa (React jara valur "ġdid") u tħassar il-komputazzjoni.

## Il-fiksjoni: sselettori mmemoizzati (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` jakkesa r-riżultat u jerġa' jaħdem biss il-komputazzjoni għalija meta l-inputs tiegħu (`state.items`) attwalment jinbidlu — inkella jirritorna ir-referenza **istess**, u jipprevjeni kemm il-kompututazzjoni u r-re-renders downstream.

## Sselettori li jikkomponnu

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

Sselettori jikkomponnu, u jibnu derivazzjonijiet kumplessi minn biċċiet sempliċi, individwalment-akkesati.

## Għaliex dan importanti

Sselettori jiddiskonnettaw komponenti mir-rotta tal-istat (ġlieda tal-manutenzjoni) u jipprovdu post wieħed biex wieħed jesprimi data derivata.

Memoization jagħmel sselettori derivati effiċjenti — jipprevjeni komputazzjoni ripetuta għalija u, kruċjali, jirritorna referenzi stabbli sabiex komponenti konnessi ma re-renderjazz inutilment.

F'apps Redux/NgRx, sselettori mmemoizzati (Reselect/`createSelector`) huma għodda prestazzjonali u ta' arkitettura ewlenija; l-idea akkess tal-cache tidher ukoll bħala `useMemo` u `computed` inkella.