React الآثار الجانبية موضحة باستخدام useEffect (دليل 2025)

في React, تكون الآثار الجانبية إجراءات تحدث خارج عملية العرض القياسية. أمثلة على ذلك جلب البيانات، وتحديث DOM مباشرة، والعمل مع واجهات برمجة التطبيقات، أو مزامنة التخزين في المتصفح. يوفر React الـ useEffect هوك للتعامل مع هذه المهام.

---

متى يُشغّل React useEffect؟

• عند التحميل (العرض الأول).
• عند التحديثات (عند تغيير التبعيات).
• عند الإزالة (تنظيف).

لا يُشغّل React useEffect على الخادم في مكونات الخادم — بل يُشغّل فقط في المتصفح بعد العرض.

---

مصفوفة التبعيات

الحجة الثانية لـ useEffect هي مصفوفة التبعيات.

• [] → تشغيل مرة واحدة فقط بعد التحميل.
• [value] → تشغيل عند تغيير value.
• تجاهلها → تشغيل بعد كل عرض.

---

مثال: useEffect مع تبعية الحالة

import React, { useState, useEffect } from "React";

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

  useEffect(() => {
    document.title = `Count: ${count}`;
    return () => {
      document.title = "React App";
    };
  }, [count]); // effect runs whenever "count" changes

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

---

أمثلة على التأثيرات الجانبية

• مكالمات API (جلب البيانات)
• WebSockets (الاستماع إلى التحديثات الحية)
• التخزين المحلي (الحفاظ على الحالة)
• مزامنة حالات متعددة

---

أفضل الممارسات (2025)

1. قم دائمًا بتحديد التبعيات (استخدم ملحق ESLint React-hooks/exhaustive-deps).
2. نظّف التأثيرات عندما يكون ذلك ممكنًا (return () => { ... }).
3. تجنّب العمليات الحسابية الثقيلة داخل useEffect → استخدم التخزين المؤقت بدلًا من ذلك.
4. للوظائف غير المزامنة، استخدم دالة غير مزامنة داخل useEffect.

useEffect(() => {
  let isActive = true;

  async function fetchData() {
    const res = await fetch("/API/data");
    if (isActive) {
      // فقط قم بالتحديث إذا كان لا يزال مثبتًا
    }
  }

  fetchData();
  return () => {
    isActive = false;
  };
}, []);

---

الاستنتاج

useEffect هو حجر الزاوية لإدارة التأثيرات الجانبية في مكونات React الوظيفية. من خلال إتقان مصفوفات التبعيات ووظائف التنظيف وأنماط العصر الحديث، ستكتب تطبيقات React تكون قابلة للتنبؤ، ذات أداء عالٍ، وأسهل في الصيانة.