Effect Pitfalls مزالق الـ Effect الشائعة

آخر تحديث: 2026-11-03

Effect Pitfalls مزالق الـ Effect الشائعة

تتركّز مزالق useEffect حول مصفوفة الاعتمادات: اعتماد ناقص يقرأ قيمة قديمة، واستدعاء setState داخل Effect يُحدِث عنه اعتماد يسبّب حلقة لا نهائية، واعتماد على كائن أو دالة يكون مرجعًا جديدًا كل مرة، ونسيان التنظيف يكدّس المستمعين. أدرك هذه الأصناف الأربعة يصبح معظم الـ Effects آمنًا، لأن جسم الـ Effect أخيرًا لا يفعل إلا ما يعد به اسمه.

ℹ️ ملاحظة يحوّل المحرّر JSX إلى JavaScript ويعرض الواجهة الحقيقية داخل بيئة معزولة؛ تُركَّب المكوّنات تلقائياً دون استدعاء render يدوي.

📝 الصيغة

useEffect(() => {
  document.title = 'Current ' + count + ' times' // ① if you use count, declare it as a dependency
}, [count])                               // ② dependency array: re-run only when it changes

useEffect(() => {
  const id = setInterval(tick, 1000)
  return () => clearInterval(id)          // ③ clean up on unmount to avoid stacking
}, [])

القيمة المرجعة：لا قيمة مرجعة؛ إنها نمط برمجي وليست واجهة قابلة للاستدعاء.

▶ مثال

المثال يعمل مباشرة: يُعرض تلقائياً عند التوسيع وتظهر التعديلات فوراً.

الناتج：

تتحدّث القائمة أثناء الكتابة، ولا يزيد عداد تنفيذ الـ Effect إلا عند تغيّر query؛ ويلخّص أدناه نتائج المزالق الكبرى الثلاث: اعتماد ناقص، وحلقة لا نهائية، واعتماد على كائن.

💡 النقاط الأساسية

🏷️ المزيد من التوجيه والحالة

💡 حالات ذات صلة

📚 دروس ذات صلة

❓ الأسئلة الشائعة

فريق Web-Tutorial التقني

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

من نحن