useEffect في React: الجلب، التحديث، والتنظيف

في React، ليس كل شيء يتعلق بعرض الواجهة فقط. أحيانًا تحتاج إلى جلب بيانات من API، أو الاستماع لحدث، أو تشغيل مؤقت. هذه الأشياء تُسمّى Side Effects.

هنا يأتي دور useEffect. هذا الـ Hook يسمح لك بتشغيل كود جانبي بعد أن يتم رسم المكوّن.

ما هو useEffect في React؟

useEffect هو Hook في React لتنفيذ Side Effects بعد كل Render أو عند تغيّر قيم محددة عبر dependency array. يُستخدم لجلب البيانات، الاشتراك، والمؤقتات.

التعريف البسيط: useEffect = مكان لتشغيل كود خارج منطق JSX.

مثال 1: useEffect يُنفّذ مرة واحدة (First Render)

import { useEffect } from "react";

function App() {
  useEffect(() => {
    console.log("تم تحميل الصفحة");
  }, []);

  return <h1>مرحبا</h1>;
}

هنا مررنا مصفوفة فارغة []، لذلك يعمل useEffect مرة واحدة فقط.

هذا يشبه componentDidMount في الكلاسات: الكود يُنفّذ فقط عند تحميل المكوّن لأول مرة، وهذا مفيد لتسجيل حدث أو تهيئة بسيطة.

مثال 2: جلب بيانات من API باستخدام useEffect

import { useEffect, useState } from "react";

function Users() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then((res) => res.json())
      .then((data) => setUsers(data));
  }, []);

  return (
    <ul>
      {users.map((u) => (
        <li key={u.id}>{u.name}</li>
      ))}
    </ul>
  );
}

هنا useEffect يُنفّذ مرة واحدة لجلب البيانات عند بداية التحميل.

الفكرة: عند أول رندر، ننفّذ طلب fetch، ثم نخزّن البيانات في users. بعد التحديث، React يعيد العرض ويُظهر القائمة.

مثال 3: useEffect يعتمد على قيمة داخل dependency array

import { useEffect, useState } from "react";

function Search({ query }) {
  useEffect(() => {
    console.log("بحث جديد:", query);
  }, [query]);

  return <p>نتائج البحث عن: {query}</p>;
}

هنا useEffect يُنفّذ كل مرة تتغير فيها قيمة query.

أي تغيير في query يعني أن المستخدم كتب شيئًا جديدًا، لذلك نعيد تشغيل الكود داخل useEffect لتحديث النتائج أو إرسال طلب جديد.

مثال 4: Cleanup في useEffect لتنظيف المؤقتات

import { useEffect } from "react";

function Timer() {
  useEffect(() => {
    const id = setInterval(() => {
      console.log("يعمل...");
    }, 1000);

    return () => clearInterval(id);
  }, []);

  return <p>Timer شغال</p>;
}

هنا نستخدم cleanup لإيقاف المؤقت عند إزالة المكوّن.

لماذا؟ لأن المؤقت سيبقى يعمل حتى بعد إزالة المكوّن، وهذا قد يسبب تسريبًا في الذاكرة. دالة التنظيف تمنع ذلك.

أخطاء شائعة في useEffect

• نسيان dependency array فيسبب إعادة تنفيذ لا نهائية.
• وضع قيم غير لازمة داخل dependency array.
• جلب البيانات بدون التعامل مع التحميل والأخطاء.

الأسئلة الشائعة — FAQ

ما هو useEffect في React؟

Hook لتنفيذ التأثيرات الجانبية بعد الرندر.

ما معنى dependency array؟

مصفوفة تحدد متى يعاد تشغيل useEffect.

متى أكتب [] في useEffect؟

عند تشغيل التأثير مرة واحدة فقط بعد أول رندر.

ما هو cleanup في useEffect؟

دالة لتنظيف الاشتراكات أو المؤقتات عند إزالة المكوّن.

هل useEffect بديل عن lifecycle؟

نعم، يمكنه تعويض عدة lifecycle methods.