03- useEffect (Dependencies ، clean-up function، و useLayoutEffect)

useEffect چیه و به چه دردی میخوره؟

useEffect یک Hook در React هست که به ما اجازه میده عوارض جانبی (side effects) رو در کامپوننتهامون مدیریت کنیم.

عوارض جانبی یعنی کارهایی که خارج از روند رندرینگ انجام میشن، مثل:

• دریافت داده از سرور (API calls)

• کار با DOM (مثل تغییر عنوان صفحه)

• تنظیم تایمر یا Interval

• اتصال به رویدادها (مثل scroll یا resize)

jsx

useEffect(() => {
  // کد ما اینجا اجرا میشه
}, []);

وابستگیها یا Dependency Array

دومین آرگومان useEffect آرایهای از وابستگیهاست که مشخص میکنه کی افکت دوباره اجرا بشه.

سه حالت اصلی:

• بدون آرایه

• آرایه خالی (componentDidMount)

• با وابستگی

jsx

// مثال: دریافت دیتا هنگام بارگذاری اولیه
useEffect(() => {
  fetchUsers();
}, []); // فقط یک بار

// مثال: ذخیره در localStorage وقتی count تغییر کنه
useEffect(() => {
  localStorage.setItem('count', count);
}, [count]); // فقط وقتی count عوض بشه

تابع Clean-up (پاکسازی)

برخی افکتها نیاز به پاکسازی دارن تا از نشت حافظه (memory leak) یا رفتارهای ناخواسته جلوگیری کنیم.

تابع clean-up رو به صورت return از داخل useEffect برمیگردونیم:

jsx

useEffect(() => {
  // راهاندازی
  const timer = setInterval(() => {
    console.log('tick');
  }, 1000);
  
  // پاکسازی
  return () => {
    clearInterval(timer); // تایمر رو پاک میکنیم
    console.log('تمیزکاری انجام شد');
  };
}, []);

کی اجرا میشه؟

• قبل از اجرای مجدد افکت (وقتی وابستگیها تغییر کنن)

• وقتی کامپوننت از صفحه خارج میشه (unmount)

مثالهای رایج برای clean-up:

• لغو اشتراک (unsubscribe) از WebSocket یا EventListener

• پاک کردن تایمرها و Intervalها

• لغو درخواستهای API (با AbortController)

تفاوت useEffect و useLayoutEffect

این دو تا خیلی شبیه هستن، با یه تفاوت کلیدی:

jsx

// useLayoutEffect: اندازهگیری DOM قبل از نمایش
useLayoutEffect(() => {
  const width = divRef.current.offsetWidth;
  // اینجا میتونیم width رو تنظیم کنیم قبل از اینکه کاربر ببینه
  setWidth(width);
}, []);

چه موقع از useLayoutEffect استفاده کنیم؟

• وقتی میخوایم اندازه یا موقعیت یک عنصر رو اندازه بگیریم و تغییر بدیم قبل از اینکه کاربر چشمک بزنه

• جلوگیری از flicker (لرزش) بصری

نکته مهم: تا جای ممکن از useEffect استفاده کنین و فقط در موارد ضروری سراغ useLayoutEffect برین.

نکات طلایی برای مصاحبه

1. ترتیب اجرا در Next.js با SSR: تو Next.js، useEffect فقط در سمت کلاینت اجرا میشه (بعد از هیدریشن)، پس برای کدهایی که فقط باید در مرورگر اجرا بشن عالیه.

2. اجتناب از dependency های غیرضروری: همیشه وابستگیهایی که واقعاً نیاز دارین رو وارد کنید. استفاده از eslint-plugin-react-hooks خیلی کمک میکنه.

3. اگر شیء یا آرایه تو وابستگیهاست: حواستون به reference equality باشه. استفاده از useMemo یا useCallback میتونه جلوی رندرهای اضافی رو بگیره.

4. همیشه به clean-up فکر کنید: اگر تایمر، event listener یا اشتراکگذاری دارین، حتماً clean-up بنویسید.

خلاصه یک پاراگرافی (برای توضیح سریع)

useEffect یک Hook برای مدیریت عوارض جانبی در کامپوننتهای React هست. با آرایه وابستگیها مشخص میکنیم کی اجرا بشه: آرایه خالی یعنی یک بار، با مقادیر یعنی فقط وقتی اون مقادیر تغییر کنن. تابع برگشتی برای پاکسازی استفاده میشه تا از نشت حافظه جلوگیری کنه. useLayoutEffect مشابه useEffect هست اما قبل از نقاشی صفحه اجرا میشه و برای کارهای DOM که نیاز به اندازهگیری قبل از نمایش دارن، استفاده میشه—اما در بیشتر موارد useEffect کافیه.