استخدام useEffect في React

الدرس السادس عشر: استخدام useEffect في React

في هذا الدرس، سنتعرف على useEffect، أحد أهم الـ React Hooks التي تُستخدم لإدارة التأثيرات الجانبية (side effects) في المكونات. سنتناول كيفية التعامل مع التأثيرات الجانبية باستخدام useEffect، بالإضافة إلى شرح الفرق بين بعض lifecycle methods مثل componentDidMount و componentDidUpdate و componentWillUnmount وكيفية محاكاة هذه الوظائف باستخدام useEffect. سنختم الشرح بكيفية استخدام cleanup function في useEffect.

1. ما هو useEffect؟

useEffect هو React Hook يُستخدم للتعامل مع التأثيرات الجانبية داخل المكونات الوظيفية (functional components). يتم استدعاء useEffect بعد أن يتم تحديث DOM، مما يتيح لك التعامل مع التغيرات التي تحتاج إلى العمل خارج نطاق الـ render، مثل:

• جلب البيانات من APIs.
• التفاعل مع DOM.
• إضافة مستمعي الأحداث.
• إعداد timers أو intervals.

2. التعامل مع التأثيرات الجانبية باستخدام useEffect

كيفية استخدام useEffect:

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

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

  // useEffect هو التأثير الجانبي هنا
  useEffect(() => {
    // تنفيذ التأثير الجانبي عند كل تغيير للـ state
    console.log('The count has been updated:', count);
  }, [count]); // التابع يعتمد على count

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default Example;

الشرح:

• useEffect يتم استدعاؤه بعد كل render.
• في المثال، كلما تغيرت قيمة count، يتم تسجيل الرسالة في الـ console.
• [count] هو dependency array، مما يعني أن useEffect سيتم استدعاؤه فقط عندما تتغير قيمة count.

3. الفرق بين componentDidMount, componentDidUpdate, و componentWillUnmount باستخدام useEffect

في class components، نستخدم lifecycle methods مثل:

• componentDidMount: يتم استدعاؤه مرة واحدة بعد تحميل المكون لأول مرة.
• componentDidUpdate: يتم استدعاؤه كلما تم تحديث state أو props.
• componentWillUnmount: يتم استدعاؤه قبل إزالة المكون من الـ DOM.

في function components باستخدام useEffect، يمكننا محاكاة هذه الوظائف باستخدام useEffect و dependency array.

1. محاكاة componentDidMount:

لتنفيذ تأثير جانبي مرة واحدة فقط عند تحميل المكون، نمرر [] كـ dependency array. هذا يعني أنه سيتم استدعاء useEffect فقط عند أول render، أي عند تحميل المكون.

import React, { useEffect } from 'react';

function ComponentDidMountExample() {
  useEffect(() => {
    console.log('Component mounted!');
  }, []); // [] تعني أنه سيتم التنفيذ مرة واحدة فقط

  return <div>Check the console!</div>;
}

export default ComponentDidMountExample;

2. محاكاة componentDidUpdate:

لتنفيذ تأثير جانبي عند كل render عندما يتغير state أو props، نمرر dependency array يحتوي على المتغيرات التي نريد مراقبتها.

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

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

  useEffect(() => {
    console.log('Component updated! The new count is:', count);
  }, [count]); // سيتم استدعاء useEffect عندما يتغير count

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default ComponentDidUpdateExample;

3. محاكاة componentWillUnmount:

لتنفيذ تنظيف أو إزالة التأثيرات الجانبية قبل إزالة المكون من DOM، يمكننا استخدام cleanup function داخل useEffect.

import React, { useEffect } from 'react';

function ComponentWillUnmountExample() {
  useEffect(() => {
    const timer = setInterval(() => {
      console.log('Timer is running');
    }, 1000);

    // cleanup function لتنظيف الـ timer قبل إزالة المكون
    return () => {
      clearInterval(timer);
      console.log('Component is being removed');
    };
  }, []); // سيتم تنفيذ التنظيف عند إزالة المكون من الـ DOM

  return <div>Timer is running...</div>;
}

export default ComponentWillUnmountExample;

4. استخدام الـ Cleanup في useEffect

useEffect يمكن أن يُعيد cleanup function تقوم بإزالة أو تنظيف التأثيرات الجانبية عندما يتغير شيء ما أو قبل إزالة المكون من DOM. على سبيل المثال، إذا قمت بإنشاء timer أو event listeners، يجب تنظيف هذه العناصر عندما لا نحتاج إليها بعد الآن لتجنب تسرب الذاكرة أو حدوث أخطاء.

كيفية استخدام cleanup function:

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

function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setSeconds((prevSeconds) => prevSeconds + 1);
    }, 1000);

    // return cleanup function التي تنظف الـ timer عند إزالة المكون
    return () => {
      clearInterval(timer);
    };
  }, []); // التفاعل يحدث مرة واحدة فقط عند تحميل المكون

  return <div>Time: {seconds} seconds</div>;
}

export default Timer;

الشرح:

• clearInterval(timer) داخل cleanup function يقوم بإيقاف الـ timer عندما يتم إزالة المكون من DOM.

5. الختام

useEffect هو Hook قوي للغاية يساعد في إدارة التأثيرات الجانبية في React. يسمح لنا بمحاكاة وظائف lifecycle methods في function components، مثل componentDidMount و componentDidUpdate و componentWillUnmount. كما يتيح لنا استخدام cleanup function لإزالة التأثيرات الجانبية عند الحاجة.

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