React شرح الآثار الجانبية باستخدام useEffect (دليل ٢٠٢٥)

في React، الآثار الجانبية هي الإجراءات التي تحدث خارج عملية التصيير الطبيعية. تشمل الأمثلة جلب البيانات، تحديث الـ DOM مباشرة، العمل مع APIs، أو مزامنة مع تخزين المتصفح. 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 (الاستماع إلى التحديثات المباشرة)
• Local Storage (تخزين الحالة)
• مزامنة حالات متعددة

أفضل الممارسات (٢٠٢٥)

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

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

  async function fetchData() {
    const res = await fetch("/API/data");
    if (isActive) {
      // only update if still mounted
    }
  }

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

الخاتمة

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