state management मध्ये selectors आणि memoization म्हणजे काय?

Question

Accepted Answer

A **selector** हा एक फंक्शन आहे जो **state मधून विशिष्ट डेटाचा तुकडा वाचतो (निकाल काढतो)**. **Memoization** एक selector चा परिणाम कॅश करते जेणेकरून तो केवळ त्याचे इनपुट बदलल्यावर पुन्हा मोजला जाते — जेव्हा selectors खर्चिक काम करतात किंवा अनावश्यक re-renders टाळण्यासाठी हे कार्यप्रदर्शनासाठी महत्वाचे आहे.

## मूलभूत selectors — 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 state structure च्या ज्ञानाला केंद्रीभूत करतात — components `selectCartTotal(state)` विचारतात कोणीही जाणून न घेता की ते कोठे/कसे संग्रहीत आहे, त्यामुळे जर state shape बदलल्यास तुम्ही एका selector ला अपडेट करा, प्रत्येक component ला नाही.

## समस्या: derived selectors प्रत्येक call वर पुन्हा मोजले जातात

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

A selector जो नवीन array/object तयार करतो तो प्रत्येक call वर **नवीन reference** परत करतो — जो अनावश्यक re-renders ट्रिगर करू शकतो (React "नवीन" व्हॅल्यू पाहतो) आणि computation वाया करतो.

## समाधान: 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` परिणाम कॅश करतो आणि केवळ तेव्हा महाग computation पुन्हा चलवतो जेव्हा त्याचे इनपुट (`state.items`) खरोखर बदलतात — अन्यथा ते **समान reference** परत करतो, putation आणि downstream 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 रचना करतात, साध्या, वैयक्तिकरित्या-कॅश केलेल्या भागांपासून जटिल निकाल बनवतात.

## हे महत्वाचे का आहे

Selectors components ला state च्या shape पासून अलग करतात (एक maintainability जीत) आणि derived data व्यक्त करण्यासाठी एक जागा प्रदान करतात.

Memoization derived selectors कार्यक्षम बनवते — वारंवार महाग computation टाळून आणि, महत्वाचे म्हणून, स्थिर references परत करून जेणेकरून connected components अनावश्यकपणे re-render होत नाहीत.

Redux/NgRx apps मध्ये, memoized selectors (Reselect/`createSelector`) एक मुख्य कार्यप्रदर्शन आणि architecture साधन आहे; समान caching कल्पना `useMemo` आणि `computed` इतरत्र दिसते.