State management ਵਿੱਚ selectors ਅਤੇ memoization ਕੀ ਹਨ?

Question

Accepted Answer

ਇੱਕ **selector** ਇੱਕ ਫੰਕਸ਼ਨ ਹੈ ਜੋ **state ਤੋਂ ਇੱਕ ਖਾਸ ਡਾਟਾ ਪੜ੍ਹਦਾ (ਪ੍ਰਾਪਤ ਕਰਦਾ) ਹੈ**। **Memoization** ਇੱਕ selector ਦੇ ਨਤੀਜੇ ਨੂੰ cache ਕਰਦਾ ਹੈ ਤਾਂ ਕਿ ਇਹ ਕੇਵਲ ਉਦੋਂ ਦੁਬਾਰਾ ਗਣਨਾ ਕਰੇ ਜਦੋਂ ਇਸਦੇ inputs ਬਦਲਦੇ ਹਨ — ਜਦੋਂ selectors ਮਹਿੰਗਾ ਕਾਰਜ ਕਰਦੇ ਹਨ ਜਾਂ ਬੇਲੋੜੀ re-renders ਤੋਂ ਬਚਣ ਲਈ ਮਹੱਤਵਪੂਰਨ ਹੈ।

## ਬੁਨਿਆਦੀ selectors — 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
```

Selectors state ਦੀ ਬਣਤਰ ਦੀ ਜਾਣਕਾਰੀ ਕੇਂਦਰੀਕ੍ਰਿਤ ਕਰਦੇ ਹਨ — components `selectCartTotal(state)` ਪੁੱਛਦੇ ਹਨ ਬਿਨਾ ਇਹ ਜਾਣੇ ਕਿ ਇਹ ਕਿੱਥੇ/ਕਿਵੇਂ ਸਟੋਰ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਇਸ ਲਈ ਜੇਕਰ state ਦੀ ਸ਼ਕਲ ਬਦਲਦੀ ਹੈ ਤਾਂ ਤੁਸੀਂ ਇੱਕ selector ਅਪਡੇਟ ਕਰਦੇ ਹੋ, ਹਰ component ਨੂੰ ਨਹੀਂ।

## ਸਮੱਸਿਆ: ਉਤਪੰਨ selectors ਹਰ ਕਾਲ 'ਤੇ ਦੁਬਾਰਾ ਗਣਨਾ ਕਰਦੇ ਹਨ

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

ਇੱਕ selector ਜੋ ਇੱਕ ਨਵਾਂ array/object ਬਣਾਉਂਦਾ ਹੈ ਹਰ ਕਾਲ ਇੱਕ **ਨਵਾਂ reference** ਵਾਪਸ ਕਰਦਾ ਹੈ — ਜੋ ਬੇਲੋੜੀ re-renders ਨੂੰ ਸੁਰਜ਼ਿਤ ਕਰ ਸਕਦਾ ਹੈ (React ਇੱਕ "ਨਵਾਂ" ਮੁੱਲ ਦੇਖਦਾ ਹੈ) ਅਤੇ ਗਣਨਾ ਨੂੰ ਬਰਬਾਦ ਕਰਦਾ ਹੈ।

## ਹੱਲ: 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` ਨਤੀਜੇ ਨੂੰ cache ਕਰਦਾ ਹੈ ਅਤੇ ਕੇਵਲ ਤਾਂ ਮਹਿੰਗੀ ਗਣਨਾ ਨੂੰ ਦੁਬਾਰਾ ਚਲਾਉਂਦਾ ਹੈ ਜਦੋਂ ਇਸਦੇ inputs (`state.items`) ਅਸਲ ਵਿੱਚ ਬਦਲਦੇ ਹਨ — ਨਹੀਂ ਤਾਂ ਇਹ **ਇਕੋ ਜਿਹਾ reference** ਵਾਪਸ ਕਰਦਾ ਹੈ, ਦਾਨਵਾਂ ਦੁਬਾਰਾ ਗਣਨਾ ਅਤੇ ਡਾਉਨਸਟ੍ਰੀਮ re-renders ਨੂੰ ਰੋਕਦਾ ਹੈ।

## Selectors ਨੂੰ ਜੋੜਨਾ

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

Selectors ਸੰਯੋਜਿਤ ਕਰਦੇ ਹਨ, ਸਧਾਰਨ, ਵਿਅਕਤੀਗਤ ਤੌਰ 'ਤੇ cached ਟੁਕੜਿਆਂ ਤੋਂ ਜਟਿਲ ਉਤਪਤੀ ਨਿਰਮਾਣ ਕਰਦੇ ਹਨ।

## ਇਹ ਕਿਉਂ ਮਾਇਨੇ ਰੱਖਦਾ ਹੈ

Selectors components ਨੂੰ state ਦੀ ਸ਼ਕਲ ਤੋਂ ਵੱਖ ਕਰਦੇ ਹਨ (ਇੱਕ maintainability ਜਿੱਤ) ਅਤੇ ਉਤਪੰਨ ਡਾਟਾ ਨੂੰ ਪ੍ਰਗਟ ਕਰਨ ਲਈ ਇੱਕ ਸਥਾਨ ਫਰਾਹਮ ਕਰਦੇ ਹਨ।

Memoization ਉਤਪੰਨ selectors ਨੂੰ ਕੁਸ਼ਲ ਬਣਾਉਂਦਾ ਹੈ — ਦੁਹਰਾਈ ਗਈ ਮਹਿੰਗੀ ਗਣਨਾ ਤੋਂ ਬਚਦੇ ਹੋਏ ਅਤੇ, ਜ਼ਰੂਰੀ ਤੌਰ 'ਤੇ, ਸਥਿਰ references ਵਾਪਸ ਕਰਦੇ ਹੋਏ ਤਾਂ ਕਿ ਜੁੜੇ ਹੋਏ components ਬੇਲੋੜੀ ਤਰੀਕੇ ਨਾਲ re-render ਨਾ ਹੋਣ।

Redux/NgRx ਐਪਸ ਵਿੱਚ, memoized selectors (Reselect/`createSelector`) ਇੱਕ ਮੁੱਖ ਪ੍ਰਦਰਸ਼ਨ ਅਤੇ ਆਰਕਿਟੈਕਚਰ ਟੂਲ ਹੈ; ਇਕੋ caching ਵਿਚਾਰ `useMemo` ਅਤੇ `computed` ਹੋਰ ਜਗ੍ਹਾਵਾਂ 'ਤੇ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ।