React.memo کیا کرتا ہے اور اسے کب استعمال کرنا قابلِ غور ہے؟

Question

Accepted Answer

`React.memo` ایک جزو کو لپیٹتا ہے تاکہ **اس کی props پچھلے render کے ساتھ shallow-equal ہوں تو دوبارہ rendering کو نظر انداز کرے**۔ ڈیفالٹ طور پر، جب بھی اس کا parent render ہوتا ہے تو ایک child دوبارہ render ہوتا ہے؛ `memo` اسے روک دیتا ہے جب props واقعی تبدیل نہ ہوئے ہوں۔ ```jsx const Row = React.memo(function Row({ item, onSelect }) { // re-renders only when `item` or `onSelect` reference changes return

onSelect(item.id)}>{item.name}

; }); ``` ## پھندا: اسے مستحکم props کی ضرورت ہے `memo` ایک **shallow** موازنہ کرتا ہے۔ اگر parent ہر render میں ایک نیا object/array/function بھیجے تو موازنہ ہمیشہ ناکام ہوگا اور `memo` کچھ نہیں کرے گا: ```jsx function List({ items }) { // ❌ a NEW function every render → Row's onSelect prop always "changes" return items.map(i => pick(id)} />); } ``` `useCallback` سے function کو مستحکم کر کے ٹھیک کریں: ```jsx const onSelect = useCallback(id => pick(id), []); // same reference across renders return items.map(i => ); ``` ## یہ قابلِ غور ہے جب - ایک جزو **اکثر** **ایک جیسی** props کے ساتھ render ہوتا ہے اور اس کی rendering غیر معمولی ہے (بڑی فہرستیں، مہنگے subtrees)۔ ## یہ قابلِ غور نہیں ہے جب - زیادہ تر اجزاء سستے ہیں؛ موازنہ خود کا ایک خرچ ہے، اور سب کچھ لپیٹنا کوئی فائدہ دیے بغیر پیچیدگی بڑھاتا ہے۔ **پہلے profile کریں** React DevTools Profiler کے ساتھ، پھر ثابت شدہ hotspots کو memoize کریں — اندھے اندازے سے memoize نہ کریں۔