أولاً قس ثم أصلح السبب الحقيقي — لا تضع useMemo في كل مكان بناءً على التخمين.
استخدم React DevTools Profiler (فعّل "Highlight updates when components render"). يعرض أي المكونات أعيدت تصييرها و لماذا (تغيرت الخصائص، تغيرت الحالة، أعيد تصيير المكون الأب، تغيرت السياق).
تهزم :
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. قيمة السياق تُعاد إنشاؤها في كل تصيير → جميع المستهلكين يعيدون التصيير. احفظ value في الذاكرة أو قسم السياقات.
3. الحالة موضوعة عالياً جداً. خفض الحالة بحيث يعتمد عليها عدد أقل من المكونات هو غالباً أكبر فائدة:
// move the fast-changing input state DOWN into the input component
// so typing doesn't re-render the whole page
4. عمل مكلف في التصيير → ضعه في useMemo.
إعادات التصيير عادة ما تكون رخيصة — React سريع. معظم "التحسينات" تضيف تعقيداً بدون فائدة قابلة للقياس. فضّل الإصلاحات الهيكلية (تجميع الحالة، virtualization للقوائم التي تحتوي على آلاف الصفوف) على نثر memos في كل مكان. حسّن نقاط الاختناق المحددة التي يكشفها المحلل، وأعد القياس للتأكد من أن الإصلاح ساعد فعلاً.