تشخيص الإغلاقات القديمة وحلقات Effect

افهم الأسباب المحتملة

• يحفظ المعالج قيم عرض واحد وقد يحفظ اعتماد ناقص قيما قديمة، وقد تشكل Effect تحدث ما يغير اعتمادها دورة.
• قد تعيد هويات الكائن والدالة الإعداد، وتخلق الحالة المشتقة المكررة Effect غير لازمة. قد يكون الحل حذف المزامنة لا حيلة توقيت.

1. حدد مالك العمل

اسأل هل هو اشتقاق أم فعل أم مزامنة. التصفية محلية بالعرض والحفظ بالحدث والاشتراك Effect. اسرد القراءات والعرض الذي أنشأ الرد؛ فلا يجدد await أو المؤقت الإغلاق. صغر المدخل وافحص المصدر لا السجل المتكرر فقط.

2. تتبع القراءات وحواف التحديث

اسرد القراءات وارسم الإعداد ثم التحديث ثم الاعتماد. يقارن Object.is فتختلف هوية كائن ولو تشابهت حقوله. لا تحذف الاعتماد لكشفه الدورة؛ انقل كائن الإعداد داخله والثابت للخارج أو أصلح مصدر الحقيقة. أبق الفاحص وافهم دورة التطوير فحصا لا وعد مرة واحدة.

3. أصلح تحديث السابق مع التنظيف

إذا احتاج المؤقت العدد التالي فقط فاستخدم دالة نقية لا count المحفوظة. ينصب المثال مؤقتا ويمسح مقبضه ولا يمنع إعادة الاتصال بمرجع. تبقى قراءة خاصية أخرى محتاجة اعتمادها؛ ليست الدالة إذنا بالحذف. الوقت تقريبي فاضبطه أو أكد شرطا نهائيا.

import { useEffect, useState } from "react";
export default function App() { const [count, setCount] = useState(0); useEffect(() => { const timer = setInterval(() => setCount(c => c + 1), 1000); return () => clearInterval(timer); }, []); return <main><h1>Owned interval</h1><p>{count}</p></main>; }

The count increases while mounted; unmount clears its interval.

4. احذف مزامنة بلا هدف خارجي

احسب التصفية والمجموع مباشرة بدل نسخهما بحالة Effect لتحذف النتيجة القديمة والحافة. يصفّي المثال دون Effect. لا تضف memo لإخفاء الرسم الخاطئ، بل بعد قياس حساب نقي. افحص الاشتراكات الباقية والتنظيف والنتائج القديمة مستقلة.

import { useState } from "react";
const names = ["Alpha", "Beta"];
export default function App() { const [query, setQuery] = useState(""); const matches = names.filter(n => n.toLowerCase().includes(query.toLowerCase())); return <main><h1>Derived results</h1><label>Query<input value={query} onChange={e => setQuery(e.target.value)} /></label><p>{matches.join(", ")}</p></main>; }

Typing bet shows Beta.

امنع تكرار المشكلة

• وثق علاقة كل Effect وأبق الفاحص واختبر التنظيف، وفضل الحالة الدنيا والأفعال المباشرة بدل الأعلام.