Apa itu selector dan memoization dalam manajemen state?

Question

Accepted Answer

Sebuah **selector** adalah fungsi yang **membaca (menurunkan) sepotong data spesifik dari state**. **Memoization** men-cache hasil selector sehingga hanya diperhitungkan ulang ketika input-nya berubah — penting untuk kinerja ketika selector melakukan pekerjaan mahal atau untuk menghindari re-render yang tidak perlu.

## Selector dasar — enkapsulasi akses state

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

Selector memusatkan pengetahuan tentang struktur state — komponen meminta `selectCartTotal(state)` tanpa mengetahui di mana/bagaimana disimpan, jadi jika bentuk state berubah, Anda memperbarui satu selector, bukan setiap komponen.

## Masalahnya: selector yang diturunkan diperhitungkan ulang pada setiap pemanggilan

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

Selector yang membuat array/objek baru mengembalikan **referensi baru** pada setiap pemanggilan — yang dapat memicu re-render yang tidak perlu (React melihat nilai "baru") dan membuang-buang komputasi.

## Perbaikannya: selector yang dimemoize (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` men-cache hasil dan hanya menjalankan ulang komputasi yang mahal ketika input-nya (`state.items`) benar-benar berubah — jika tidak, ia mengembalikan **referensi yang sama**, mencegah baik rekomputasi maupun re-render di hilir.

## Mengkomposisi selector

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

Selector bersusun, membangun penurunan yang kompleks dari potongan sederhana yang di-cache secara individual.

## Mengapa ini penting

Selector memisahkan komponen dari bentuk state (kemenangan dalam pemeliharaan) dan menyediakan satu tempat untuk mengekspresikan data yang diturunkan.

Memoization membuat selector yang diturunkan efisien — menghindari komputasi mahal berulang dan, yang krusial, mengembalikan referensi stabil sehingga komponen yang terhubung tidak re-render secara tidak perlu.

Dalam aplikasi Redux/NgRx, selector yang dimemoize (Reselect/`createSelector`) adalah alat kinerja dan arsitektur utama; ide caching yang sama muncul sebagai `useMemo` dan `computed` di tempat lain.