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