useEffect ينفّذ كودًا بعد عرض المكون، أو عندما تتغير قيم معينة. يُستخدم للأعمال “الجانبية”: جلب البيانات، والمؤقتات، والاشتراك في الأحداث.

import { useState, useEffect } from 'react';

function Profile({ userId }) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetch(`/api/users/${userId}`)
      .then(res => res.json())
      .then(setUser);
  }, [userId]);  // run again when userId changes

  return <p>{user?.name}</p>;
}

قائمة الاعتماديات

• []: مرة واحدة بعد أول عرض.
• [userId]: كلما تغير userId.
• دون قائمة: بعد كل عرض.

التنظيف

useEffect(() => {
  const id = setInterval(tick, 1000);
  return () => clearInterval(id);
}, []);