پہلے ماپیں، پھر اصل وجہ ٹھیک کریں — اندازے سے ہر جگہ useMemo مت ڈالیں۔
React DevTools Profiler استعمال کریں ("Highlight updates when components render" کو فعال کریں)۔ یہ دکھاتا ہے کہ کون سے components دوبارہ render ہوئے اور کیوں (props بدلے، state بدلی، parent render ہوا، context بدلا)۔
کو شکست دیں:
React.memo// ❌ new function + new object every render
<Child onClick={() => go()} style={{ color: "red" }} />
// ✅ stabilize them
const onClick = useCallback(() => go(), []);
const style = useMemo(() => ({ color: "red" }), []);
<Child onClick={onClick} style={style} />
2. Context value ہر render میں دوبارہ بنایا گیا → تمام consumers دوبارہ render ہوں گے۔ value کو memoize کریں یا contexts کو تقسیم کریں۔
3. State بہت اونچائی پر رکھا گیا۔ State کو کم کرنا تاکہ کم components اس پر منحصر ہوں اکثر سب سے بڑی جیت:
// move the fast-changing input state DOWN into the input component
// so typing doesn't re-render the whole page
4. Render میں مہنگا کام → useMemo میں لپیٹیں۔
Re-renders عام طور پر سستے — React تیز ہے۔ زیادہ تر "optimizations" ناپنے کے قابل فائدے کے بغیر پیچیدگی شامل کرتے ہیں۔ memos پھیلانے کی بجائے ساختی اصلاحات (state کو جمع کرنا، ہزاروں قطاروں کے لیے list virtualization) کو ترجیح دیں۔ اس مخصوص hotspots کو optimize کریں جو profiler ظاہر کرتا ہے، اور یقینی بنانے کے لیے دوبارہ ماپیں کہ اصلاح نے حقیقی میں مدد کی۔