تسربات إغلاق React عادة ما تأتي من ردود الاتصال طويلة الأمد_

الإغلاقات ليست رائحة في React. إنها JavaScript عادية. تصبح مشكلة ذاكرة فقط عندما يحتفظ نظام آخر برد الاتصال لفترة أطول بعد أن كان ينبغي أن يختفي المكون الذي أنشأها.

لهذا السبب تستمر نفس الأخطاء في العودة بأشكال مختلفة:

• مستمعات الأحداث
• فترات
• اشتراكات
• مراقبون

شكل تسرب نموذجي

تبدو المشكلة عادةً كما يلي:

useEffect(() => {
  function onResize() {
    setWidth(window.innerWidth);
  }
 
  window.addEventListener("resize", onResize);
}, []);

إذا لم يتم إزالة المستمع أبدًا، يمكن أن تحتفظ ردود الاتصال بمراجع لحالة المكون ووظائف التحديث لفترة أطول مما هو مقصود. قد يكون تسرب واحد صغيرًا. التنقل المتكرر عبر نفس الشاشة يمكن أن يحوله إلى ارتفاع ثابت في استخدام الذاكرة.

النمط الصحيح يحافظ على التسجيل والتنظيف معًا:

useEffect(() => {
  function onResize() {
    setWidth(window.innerWidth);
  }
 
  window.addEventListener("resize", onResize);
  return () => window.removeEventListener("resize", onResize);
}, []);

ماذا تفحص في التطبيقات الحقيقية

عندما تنمو الذاكرة بعد تغيير المسارات أو الجلسات الطويلة، ابدأ بردود الاتصال طويلة الأمد التي تلتقط حالة المكون. السؤال بسيط: من لا يزال يحتفظ بهذه الإغلاق؟

عادةً ما يقود هذا التحقيق إلى:

• مستمعات المتصفح
• اشتراكات المكتبة
• مراقبون غير مغلقين
• حافلات الأحداث المخصصة

قاعدة هندسية أفضل

كلما قام تأثير بتسجيل رد اتصال خارج React، قم بكتابة مسار التنظيف في نفس التأثير قبل أن تنتقل إلى الأمام. تلك العادة تمنع المزيد من التسربات أكثر من أي جلسة تحليل لاحقة.

قراءة إضافية

• React useEffect
• تصحيح ذاكرة أدوات مطوري Chrome