State management-இல் selectors மற்றும் memoization என்றால் என்ன?

Question

Accepted Answer

ஒரு **selector** என்பது **state-இலிருந்து ஒரு குறிப்பிட்ட data-ஐ read (derive) செய்யும்** ஒரு function. **Memoization** ஒரு selector-இன் result-ஐ cache செய்கிறது, அதன் inputs மாறும்போது மட்டுமே அது மீண்டும் கணக்கிடப்படும் — selectors விலையுயர்ந்த வேலையைச் செய்யும்போது அல்லது தேவையற்ற re-renders-ஐ தவிர்க்க performance-க்கு இது முக்கியம்.

## Basic selectors — state access-ஐ encapsulate செய்தல்

```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 structure பற்றிய அறிவை மையப்படுத்துகின்றன — components `selectCartTotal(state)` என்று கேட்கின்றன, அது எங்கே/எப்படி சேமிக்கப்பட்டுள்ளது என்று தெரியாமல், எனவே state shape மாறினால் ஒவ்வொரு component-ஐயும் அல்ல, ஒரு selector-ஐ மட்டும் update செய்கிறீர்கள்.

## பிரச்சினை: derived selectors ஒவ்வொரு call-இலும் மீண்டும் கணக்கிடப்படுகின்றன

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

ஒரு புதிய array/object-ஐ உருவாக்கும் ஒரு selector ஒவ்வொரு call-இலும் ஒரு **புதிய reference**-ஐ திருப்பித் தருகிறது — இது தேவையற்ற re-renders-ஐ trigger செய்யலாம் (React ஒரு "புதிய" value-ஐ பார்க்கிறது) மற்றும் கணக்கீட்டை வீணாக்குகிறது.

## தீர்வு: 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` result-ஐ cache செய்கிறது, அதன் inputs (`state.items`) உண்மையில் மாறும்போது மட்டுமே விலையுயர்ந்த கணக்கீட்டை மீண்டும் இயக்குகிறது — இல்லையெனில் அது **அதே reference**-ஐ திருப்பித் தருகிறது, recomputation மற்றும் downstream re-renders இரண்டையும் தடுக்கிறது.

## Selectors-ஐ composing செய்தல்

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

Selectors compose செய்கின்றன, எளிய, தனித்தனியாக cache செய்யப்பட்ட பகுதிகளிலிருந்து சிக்கலான derivations-ஐ உருவாக்குகின்றன.

## இது ஏன் முக்கியம்

Selectors components-ஐ state-இன் shape-இலிருந்து decouple செய்கின்றன (ஒரு maintainability வெற்றி) மற்றும் derived data-ஐ வெளிப்படுத்த ஒரே இடத்தை வழங்குகின்றன.

Memoization derived selectors-ஐ திறமையானதாக்குகிறது — மீண்டும் மீண்டும் விலையுயர்ந்த கணக்கீட்டைத் தவிர்க்கிறது மற்றும், மிக முக்கியமாக, stable references-ஐ திருப்பித் தருகிறது, எனவே connected components தேவையில்லாமல் re-render செய்யாது.

Redux/NgRx apps-இல், memoized selectors (Reselect/`createSelector`) ஒரு முக்கிய performance மற்றும் architecture tool; அதே caching யோசனை மற்ற இடங்களில் `useMemo` மற்றும் `computed` ஆக தோன்றுகிறது.