React • المستوى الثالث • الدرس 1

فهم الآثار الجانبية ودورة حياة المكون (useEffect Hook)

أهداف الدرس العلمية

استيعاب مفهوم الآثار الجانبية (Side Effects) مثل جلب البيانات والمؤقتات.
التحكم في وقت تشغيل التأثير عبر مصفوفة الاعتماديات (Dependency Array).
فهم دورة حياة المكوّن: Mount → Update → Unmount.
كتابة دالة التنظيف (Cleanup Function) داخل useEffect.

1. ما هو Hook useEffect؟

useEffect خطاف يسمح لك بتنفيذ مهام جانبية خارج النطاق المباشر للمكوّن — مثل جلب البيانات من API، ضبط مؤقتات، أو التفاعل مع المتصفح. يعمل تلقائياً بعد كل عملية رسم.

javascript

import React, { useState, useEffect } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  // ✅ يعمل بعد كل تحديث لـ count
  useEffect(() => {
    console.log("العداد الآن:", count);
  }, [count]);
  //    ↑ مصفوفة الاعتماديات

  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

2. مصفوفة الاعتماديات (Dependency Array)

تتحكم مصفوفة الاعتماديات في وقت تنفيذ الـ Effect:

javascript

useEffect(() => {...});

🚨 بدون مصفوفة → يعمل بعد كل رسم (نادراً ما تستخدم)

javascript

useEffect(() => {...}, []);

✅ مصفوفة فارغة → يعمل مرة واحدة عند التحميل (مناسب لجلب البيانات)

javascript

useEffect(() => {...}, [count]);

✅ مع اعتماديات → يعمل فقط عند تغيّر count

التطبيق العملي المباشر

تحدي الدرس الأول: تتبع العداد + التصفير

قم بالتعديل على الكود في المحرر أدناه:

أضف زراً ثانياً بعنوان "تصفير العداد 🔄".
اربط الزر بالحدث onClick لاستدعاء setCount(0).
اختر لوناً أحمر للزر (#dc2626) لتمييزه.
راقب الـ Console — ستظهر رسالة جديدة من useEffect عند كل ضغطة!

⏳ جارٍ تحميل المحرر التفاعلي...

فهرس المستوى 3 الانتقال للدرس الثاني