useEffect Hook - إدارة التأثيرات الجانبية

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

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

  // يتم تنفيذ التأثير بعد كل عرض
  useEffect(() => {
    document.title = `Count: ${count}`;
    console.log('Effect executed');
  });

  return (
    <div>
      <h2>العدد: {count}</h2>
      <button onClick={() => setCount(count + 1)}>
        زيادة
      </button>
    </div>
  );
}

export default DocumentTitleUpdater;

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

function DependencyDemo() {
  const [count, setCount] = useState(0);
  const [name, setName] = useState('محمد');

  // يعمل فقط عند التحميل (مرة واحدة)
  useEffect(() => {
    console.log('تم تحميل المكون');
  }, []);

  // يعمل عندما يتغير العدد
  useEffect(() => {
    console.log(`تغير العدد إلى: ${count}`);
  }, [count]);

  // يعمل عندما يتغير الاسم
  useEffect(() => {
    console.log(`تغير الاسم إلى: ${name}`);
  }, [name]);

  // يعمل عندما يتغير العدد أو الاسم
  useEffect(() => {
    console.log(`العدد: ${count}, الاسم: ${name}`);
  }, [count, name]);

  return (
    <div>
      <h2>العدد: {count}</h2>
      <button onClick={() => setCount(count + 1)}>
        زيادة
      </button>

      <h2>الاسم: {name}</h2>
      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
    </div>
  );
}

export default DependencyDemo;

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

function TimerComponent() {
  const [seconds, setSeconds] = useState(0);
  const [isRunning, setIsRunning] = useState(true);

  useEffect(() => {
    if (!isRunning) return;

    // الإعداد: إنشاء فاصل زمني
    const intervalId = setInterval(() => {
      setSeconds(prev => prev + 1);
    }, 1000);

    // التنظيف: مسح الفاصل الزمني عند إلغاء تحميل المكون
    // أو عندما تتغير الاعتماديات
    return () => {
      console.log('تنظيف الفاصل الزمني');
      clearInterval(intervalId);
    };
  }, [isRunning]); // إعادة تشغيل التأثير عندما يتغير isRunning

  return (
    <div>
      <h2>الثواني المنقضية: {seconds}</h2>
      <button onClick={() => setIsRunning(!isRunning)}>
        {isRunning ? 'إيقاف مؤقت' : 'استئناف'}
      </button>
    </div>
  );
}

export default TimerComponent;

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

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    // إعادة تعيين الحالة عندما يتغير userId
    setLoading(true);
    setError(null);

    // جلب بيانات المستخدم
    fetch(`https://api.example.com/users/${userId}`)
      .then(response => {
        if (!response.ok) {
          throw new Error('فشل في جلب المستخدم');
        }
        return response.json();
      })
      .then(data => {
        setUser(data);
        setLoading(false);
      })
      .catch(err => {
        setError(err.message);
        setLoading(false);
      });
  }, [userId]); // إعادة الجلب عندما يتغير userId

  if (loading) return <div>جاري التحميل...</div>;
  if (error) return <div>خطأ: {error}</div>;
  if (!user) return <div>لم يتم العثور على مستخدم</div>;

  return (
    <div>
      <h2>{user.name}</h2>
      <p>البريد الإلكتروني: {user.email}</p>
      <p>اسم المستخدم: {user.username}</p>
    </div>
  );
}

export default UserProfile;

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

function PostsList() {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // تعريف دالة async داخل التأثير
    const fetchPosts = async () => {
      try {
        setLoading(true);
        const response = await fetch('https://jsonplaceholder.typicode.com/posts');
        const data = await response.json();
        setPosts(data.slice(0, 5)); // الحصول على أول 5 منشورات
      } catch (error) {
        console.error('خطأ في جلب المنشورات:', error);
      } finally {
        setLoading(false);
      }
    };

    fetchPosts();
  }, []); // مصفوفة فارغة - جلب مرة واحدة عند التحميل

  if (loading) {
    return <div>جاري تحميل المنشورات...</div>;
  }

  return (
    <div>
      <h2>المنشورات الأخيرة</h2>
      <ul>
        {posts.map(post => (
          <li key={post.id}>
            <h3>{post.title}</h3>
            <p>{post.body.substring(0, 100)}...</p>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default PostsList;

function WindowSize() {
  const [windowWidth, setWindowWidth] = useState(window.innerWidth);

  useEffect(() => {
    const handleResize = () => {
      setWindowWidth(window.innerWidth);
    };

    window.addEventListener('resize', handleResize);

    // التنظيف: إزالة مستمع الحدث
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []); // بدون اعتماديات - الإعداد مرة واحدة

  return <div>عرض النافذة: {windowWidth}px</div>;
}

function SearchComponent() {
  const [searchTerm, setSearchTerm] = useState('');
  const [results, setResults] = useState([]);

  useEffect(() => {
    // التأخير: الانتظار 500 مللي ثانية بعد توقف المستخدم عن الكتابة
    const timerId = setTimeout(() => {
      if (searchTerm) {
        fetch(`https://api.example.com/search?q=${searchTerm}`)
          .then(res => res.json())
          .then(data => setResults(data));
      } else {
        setResults([]);
      }
    }, 500);

    // التنظيف: إلغاء المؤقت السابق
    return () => clearTimeout(timerId);
  }, [searchTerm]);

  return (
    <div>
      <input
        type="text"
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
        placeholder="بحث..."
      />
      <ul>
        {results.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

function ThemeSelector() {
  const [theme, setTheme] = useState(() => {
    // التهيئة من localStorage
    return localStorage.getItem('theme') || 'light';
  });

  useEffect(() => {
    // المزامنة إلى localStorage كلما تغير المظهر
    localStorage.setItem('theme', theme);
    document.body.className = theme;
  }, [theme]);

  return (
    <div>
      <button onClick={() => setTheme('light')}>فاتح</button>
      <button onClick={() => setTheme('dark')}>داكن</button>
      <p>المظهر الحالي: {theme}</p>
    </div>
  );
}