كيف يتم عمليه التنظيف فى useEffact

ما تقصده هو استخدام دالة التنظيف (cleanup function) ونقوم بالأمر كالتالي:

useEffect(() => {
  const fetchData = async () => {
    // جلب البيانات هنا
  };


  fetchData();


  return () => {
    // تنظيف المتغيرات الغير مستخدمة هنا
  };
}, [/* الاعتماديات إذا كانت هناك أي اعتماديات */]);

وفي دالة return نقوم بـ:

• عند تسجيل اشتراك، يُعاد عادةً دالة أو كائن يتم استدعاؤه عندما تحدث هذه التحديثات أو الأحداث، ولكن علينا إلغاء الاشتراك عندما لا يكون بالإمكان أو لا يكون من الضروري الاستمرار في الاستماع إلى تلك التحديثات أو الأحداث.
• إن كنت تستخدم متغيرات مؤقتة داخل useEffect، تأكد من تنظيفها.
• في حال قمت بفتح موارد أخرى مثل اتصالات شبكة أو مؤقتات، فتأكد من تنظيفها.

وإليك مثال كامل:

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


const MyComponent = () => {
  // حالة لتخزين البيانات المستلمة
  const [data, setData] = useState(null);


  useEffect(() => {
    // دالة لجلب البيانات
    const fetchData = async () => {
      try {
        // يمكنك استخدام أي دالة لجلب البيانات هنا (axios، fetch، إلخ)
        const response = await fetch('https://api.example.com/data');
        const result = await response.json();
        setData(result);
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    };


    // استدعاء دالة جلب البيانات
    fetchData();


    // تنظيف المصادر عند إلغاء المكون أو حدوث تحديثات أخرى
    return () => {
      // يمكنك أيضًا إضافة تنظيف المصادر الإضافية هنا (إغلاق اتصالات شبكة، إلخ)
      console.log('Cleaning up resources...');
    };
  }, []); // الأقواس الفارغة تعني أن useEffect يعمل فقط عند التحميل الأولي للمكون


  // عرض البيانات
  return (
    <div>
      {data ? (
        <ul>
          {data.map(item => (
            <li key={item.id}>{item.name}</li>
          ))}
        </ul>
      ) : (
        <p>Loading data...</p>
      )}
    </div>
  );
};


export default MyComponent;