الهروب من الفخ: إصلاح الـ Stale Closures في React Hooks
تتسبب الـ Stale Closures في فقدان البيانات بصمت في React.
تقوم ببناء لوحة تحكم (dashboard) مع مؤقت يعمل في الخلفية. تستخدم setInterval داخل useEffect hook لحفظ البيانات تلقائيًا كل 5 ثوانٍ.
تحدث المشكلة عندما يتم تشغيل المؤقت (interval). حيث يقوم بحفظ مستند فارغ حتى لو كتب المستخدم صفحة كاملة. يظل المؤقت عالقًا في الماضي، مستخدمًا نسخة قديمة من الـ state الخاص بك.
المشكلة
عندما يتم تشغيل useEffect فإنه يلتقط المتغيرات الموجودة في نطاقه (scope).
- إذا تركت الـ state خارج مصفوفة التبعيات (dependency array)، فسيستخدم المؤقت الـ state من عملية الرندرة (render) الأولى.
- إذا أضفت الـ state إلى مصفوفة التبعيات، فسيقوم React بإعادة تشغيل المؤقت مع كل ضغطة مفتاح. هذا يؤدي إلى تدهور الأداء وإفساد التوقيت الخاص بك.
الحل: نمط الـ Mutable Ref
يجب عليك فصل المؤقت عن البيانات. استخدم useRef hook للاحتفاظ بمرجع ثابت (constant reference) لآخر حالة (state) لديك. هذا يتجنب إعادة الرندرة (re-renders) ويحافظ على استقرار المؤقت.
كيفية التنفيذ:
- أنشئ ref للاحتفاظ بآخر state لديك.
- استخدم
useEffectلتحديث هذا الـ ref كلما تغير الـ state. - ابدأ المؤقت بمصفوفة تبعيات فارغة ليعمل مرة واحدة فقط.
- قم بالوصول إلى الـ ref داخل الـ callback الخاص بالمؤقت.
تضمن هذه الطريقة أن مهام الخلفية تستخدم دائمًا بيانات حديثة، مما يحافظ على سرعة واجهة المستخدم (UI) وسلامة بياناتك.
المصدر: https://dev.to/iprajapatiparesh/escaping-the-trap-fixing-stale-closures-in-react-hooks-4gg7