هوک useEffect در React – آموزش Side Effect و آرایه وابستگی

useEffect ابزار اصلی React برای انجام Side Effect در کامپوننت‌های تابعی است: دریافت داده، دستکاری DOM، تایمر، subscribe به رویداد و هر کاری که خارج از رندر UI انجام می‌شود. با آرایه وابستگی (dependency array) کنترل می‌کنید effect دقیقاً کی اجرا شود.

useEffect چه کاری انجام می‌دهد؟

Side Effectهای رایج:

• Fetch داده از API
• تغییر document.title
• تنظیم setInterval / setTimeout
• اضافه کردن event listener به window

همه این‌ها باید داخل useEffect باشند، نه مستقیم در بدنه کامپوننت.

ساختار کلی

useEffect(() => {
  // کد Side Effect

  return () => {
    // تابع پاکسازی (اختیاری)
  };
}, [dependencies]); // آرایه وابستگی (اختیاری)

حالت ۱: اجرا فقط یک بار — []

useEffect(() => {
  console.log("فقط بعد از mount");
}, []);

آرایه خالی یعنی effect یک بار بعد از اولین رندر اجرا می‌شود. مناسب fetch اولیه یا setup یک‌باره.

حالت ۲: اجرا با هر رندر — بدون آرایه

useEffect(() => {
  console.log("بعد از هر رندر");
});

بدون dependency array، effect بعد از هر رندر اجرا می‌شود. معمولاً توصیه نمی‌شود مگر نیاز خاص داشته باشید.

حالت ۳: اجرا با تغییر وابستگی

import { useState, useEffect } from "react";

export default function Sample() {
  const [count, setCount] = useState(0);
  const [name, setName] = useState("کاربر");

  useEffect(() => {
    console.log(`Count: ${count}`);
  }, [count]);

  useEffect(() => {
    console.log(`Name: ${name}`);
  }, [name]);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>افزایش count</button>
      <button onClick={() => setName("ادمین")}>تغییر نام</button>
      <p>Count: {count}</p>
      <p>Name: {name}</p>
    </div>
  );
}

هر effect فقط وقتی مقدار داخل آرایه تغییر کند اجرا می‌شود.

مقایسه dependency array

جمع‌بندی

useEffect Side Effectها را از منطق رندر جدا می‌کند. با dependency array مشخص می‌کنید effect یک‌بار، همیشه یا فقط با تغییر state/props خاص اجرا شود. تابع cleanup برای آزادسازی منابع ضروری است — موضوعی که در آموزش cleanup function به‌تفصیل بررسی می‌شود.