کاربرد: برای عملیاتی که side-effect دارن (کار هایی مثل تغییر دام، استفاده از api ها، شنونده های رویداد، تایمر ها).
درواقع به علت تابع محور بودن ریکت، هیچ چیزی ساید افکت (یعنی تغییری خارج از اون تابع محدودهی مدنظر ما) نداره، مگر اینکه ما با useEffect ایجادش کنیم که راه پیشنهادیه واسه ایجاد ساید افکت.
همچنین useEffect بعد از رندر کامل کامپوننت اجرا میشه.
نحوه استفاده: useEffect یک تابع میگیره و اون رو بعد از رندر کامپوننت اجرا میکنه، درصورتی که باهاش به یه عنصر dom رویداد بدیم یه return هم میدیم که رویداد رو پاک کنیم وقتی تموم شد.
useEffect(() => {
const handler = () => console.log('hello');
button.addEventListener('click', handler);
return () => button.removeEventListener('click', handler);
}, []);همچنین آرایه پایانی که میگیره لیست وابستگی هاشه، اگه بدون آرایه باشه بعد از هر رندر یه بار اجرا میشه.
اگه آرایه خالی باشه فقط یک بار بعد از رندر اول useEffect ران میشه و با ریرندر ران نمیشه.
اگه چیزی توش باشه یه بار useEffect بعد از رندر اول ران میشه و یه بار با هر تغییر اون وابستگی. پیشنهاد میشه اگر از متغیری توی useEffect استفاده میکنین اون رو جزو وابستگی ها بذارین.
ما مقدار زیادی از پرفورمنس رو از تنظیم درست useEffect ها و useState ها میگیریم.
#react
#next
@persiandn
