آپ کو useMemo اور useCallback کب استعمال کرنے چاہئیں، اور وہ کون سا مسئلہ حل کرتے ہیں؟

Question

Accepted Answer

دونوں ہر بار دوبارہ حساب/دوبارہ بنانے سے بچنے کے لیے render میں کسی چیز کو کیش کرتے ہیں:
- **`useMemo`** ایک **شمار شدہ قیمت** کو کیش کرتا ہے۔
- **`useCallback`** ایک **فنکشن کی شناخت** کو کیش کرتا ہے (یہ `useMemo(() => fn, deps)` ہے)۔

یہ (a) مہنگے کام کو دوبارہ کرنے سے اور (b) حوالہ برابری کو توڑنے سے بچنے کے لیے موجود ہیں جو memoized بچے اس پر منحصر ہیں۔

```jsx
function Table({ rows, onSelect }) {
  // (a) expensive computation — recompute only when `rows` changes
  const sorted = useMemo(() => rows.slice().sort(byName), [rows]);

// (b) stable function identity — so a React.memo child doesn't re-render,
  //     and effects depending on it don't re-fire
  const handleSelect = useCallback(id => onSelect(id), [onSelect]);

return <Grid rows={sorted} onSelect={handleSelect} />;
}
```

## حوالہ کی استحکام کیوں اہم ہے

`useCallback` کے بغیر، `handleSelect` ہر render میں ایک بالکل نیا فنکشن ہے۔ ایک `React.memo(Grid)` ایک "نیا" prop دیکھے گا اور بہرحال دوبارہ render کرے گا، memoization کو شکست دیں گے۔ ایک memoized بچے کو منتقل کیے گئے یا `useEffect` dependency array میں استعمال کیے گئے object کے لیے بھی۔

## Trade-offs — ان کا زیادہ استعمال نہ کریں

```jsx
const x = useMemo(() => a + b, [a, b]); // ❌ pointless — adding is cheaper than memoizing
```

- Memoization مفت نہیں ہے: یہ میموری کے علاوہ **ہر** render پر dependency کا موازنہ کرتا ہے۔
- غلط/گمشدہ dependency array آپ کو **پرانی قیمتیں** دیتا ہے — سب سے عام bug۔
- صرف اس وقت memoize کریں جب آپ نے ایک حقیقی مسئلہ ماپا ہو (ایک مہنگا حساب، یا ایک memoized بچہ جو بہت زیادہ دوبارہ render ہو رہا ہے)۔ ابتدائی `useMemo`/`useCallback` ہر جگہ شور شامل کرتا ہے اور یہاں تک کہ سست بھی ہو سکتا ہے۔ (React 19 کا compiler خود کار طور پر memoize کر سکتا ہے، ضرورت کو کم کرتا ہے۔)