تكرار السؤال: …
الإجابة المختصرة
بأخذ لقطات ذاكرة (Heap Snapshots) ومقارنتها قبل وبعد فتح شاشات التطبيق وإغلاقها للبحث عن مراجع الكائنات المنفصلة (Detached DOM Nodes) أو المكونات غير المحررة.
الشرح
تحدث تسريبات الذاكرة عندما يحتفظ كود الـ JavaScript بمراجع لعناصر تم إزالتها من الـ DOM، كأن يسجل المكون مستمع حدث على window أو ينشئ setInterval دون تنظيفها في cleanup دالة useEffect. في Chrome DevTools نأخذ Heap Snapshot، نقوم بالإجراء، ثم نأخذ Snapshot ثانية ونبحث بمقارنة (Comparison) عن كائنات Detached.
مثال بالكود
// سبب شائع لتسريب الذاكرة: نسيان إزالة المستمع
useEffect(() => {
const onResize = () => setWidth(window.innerWidth);
window.addEventListener('resize', onResize);
// التصحيح الإلزامي: دالة تنظيف
return () => window.removeEventListener('resize', onResize);
}, []);أخطاء شائعة
- الاحتفاظ بمراجع كائنات ضخمة في متغيرات عامة (Global Variables) خارج نطاق المكونات دون مسحها.