Apa iku selectors lan memoization ing state management?

Question

Accepted Answer

A **selector** minangka fungsi sing **maca (derived) piece data spesifik saka state**. **Memoization** ngecache asil selector supaya mung recompute nalika inputs berubah — penting kanggo performance nalika selectors ngerjake pekerjaan mahal utawa kanggo nyegah re-renders sing ora perlu.

## Basic selectors — encapsulate state access

```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 ngkonsentrasikon pengetahuan babagan struktur state — components nanya `selectCartTotal(state)` tanpa ngerti endi/kepiye disimpen, dadi yen state shape berubah sampeyan update siji selector, ora saben component.

## The problem: derived selectors recompute on every call

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

A selector sing nggawe array/object anyar bali **reference anyar** saben call — sing bisa trigger re-renders sing ora perlu (React ndeleng "anyar" value) lan nglambengke computation.

## The fix: memoized 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` ngecache asil lan mung re-runs pekerjaan mahal nalika inputs (`state.items`) pancene berubah — yen ora dadi bali **reference padha**, nyegah recomputation lan downstream re-renders.

## Composing selectors

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

Selectors compose, nggawe derivations kompleks saka pieces simple, individually-cached.

## Mengapa iki penthing

Selectors decouple components saka state shape (kemenangan maintainability) lan menyediaken siji papan kanggo express data derived.

Memoization nggawe derived selectors efisien — nyegah repeated expensive computation lan, crucially, bali stable references dadi connected components ora re-render needlessly.

In Redux/NgRx apps, memoized selectors (Reselect/`createSelector`) minangka key performance lan architecture tool; ide caching padha katon minangka `useMemo` lan `computed` ing posisi liya.