انتقل إلى محتوى الدرس

Preventing Infinite Effect Loops منع الحلقات اللانهائية بالتأثيرات

أتقن استخدام خطاف useEffect لمزامنة مكونات React مع الأنظمة الخارجية بعد رسم الشاشة، وتحديد مصفوفة الاعتماديات بدقة، ومنع حلقات التصيير اللانهائية.
3 صفوف تعليمية
ReactJS
0 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

تقع الحلقة اللانهائية (Infinite Loop) عندما يحدّث التأثير متغير حالة بلا شرط بينما يدرج المتغير نفسه في اعتمادياته — مثل كتابة setCount(count + 1) مع الاعتماد على [count] أو نسيان مصفوفة الاعتماديات كلياً؛ فكل تحديث يشعل تصييراً يشغل التأثير من جديد بلا توقف.

امنع الحلقات بجعل التأثير يكتب إلى النظام الخارجي كـ localStorage باتجاه واحد منظم، أو باستخدام دالة التحديث المعتمدة على القيمة السابقة عند الضرورة.

الصف 2 كود برمجي
HTML
const [fontScale, setFontScale] = useState(16);

useEffect(() => {
  try {
    const val = String(fontScale);
    localStorage.setItem('ct_font_px', val);
  } catch {}
}, [fontScale]);
الصف 3 ملاحظة هامة