ریاست کی منیجمنٹ میں selectors اور memoization کیا ہیں؟

Question

Accepted Answer

ایک **selector** ایک فنکشن ہے جو **ریاست سے ڈیٹا کا ایک مخصوص حصہ پڑھتا (اخذ کرتا) ہے**۔ **Memoization** ایک selector کے نتیجے کو کیش کرتا ہے تاکہ یہ صرف اسی وقت دوبارہ کمپیوٹ ہو جب اس کی inputs بدل جائیں — یہ کارکردگی کے لیے اہم ہے جب selectors مہنگے کام کریں یا غیر ضروری re-renders سے بچنے کے لیے۔

## بنیادی selectors — ریاست تک رسائی کو مرکوز کریں

```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 ریاست کی ساخت کا علم مرکوز کرتے ہیں — components `selectCartTotal(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 بناتا ہے ہر کال پر ایک **نیا حوالہ** واپس کرتا ہے — جو غیر ضروری re-renders کو متحرک کر سکتا ہے (React ایک "نیا" value دیکھتا ہے) اور 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 کو دوبارہ چلاتا ہے جب اس کی inputs (`state.items`) واقعی بدل جائیں — ورنہ یہ **وہی حوالہ** واپس کرتا ہے، دونوں recomputation اور 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 کو ریاست کی شکل سے الگ کرتے ہیں (ایک برقراری کی فتح) اور اخذ شدہ ڈیٹا کو ظاہر کرنے کے لیے ایک جگہ فراہم کرتے ہیں۔

Memoization اخذ شدہ selectors کو موثر بناتا ہے — بار بار مہنگی computation سے بچتے ہوئے اور، اہم طور پر، مستحکم حوالے واپس کرتے ہوئے تاکہ منسلک components غیر ضروری طور پر دوبارہ render نہ ہوں۔

Redux/NgRx apps میں، memoized selectors (Reselect/`createSelector`) ایک اہم کارکردگی اور فن تعمیر کا ٹول ہیں؛ یہی کیشنگ کا نظریہ `useMemo` اور `computed` میں کہیں اور دکھائی دیتا ہے۔