خب تو پست قبلی راجب اشتباهات رایجی در نحوه ی استفاده از یوزافکت گفتم میریم ادامه ی داستان رو ببینیم
اینجا میتونید ببینیدش ?
فرض کنید میخوایم هر چند ثانیه یک بار مقدار یک استیت رو اپدیت کنیم
بریم ببینیم چه بلایی داره سر کدمون میاد !
افتادیم داخل یک لوپ که داره بینهایت بار تکرار میشه چون در هر ثانیه استیت نامبر داره عوض میشه و یوزافکت به این استیت وابسته هم هست پس تا استیت مقدار جدید پیدا میکنه یوزافکت ناچاره که دوباره اجرا بشه در نتیجه این لوپ شکل گرفته !
برای رفع این مشکل باید استیت های قبلی رو اپدیت کنیم نیازی نداریم که استیت نامبر را داخل دپندنسی یوزافکت قرار بدیم به این شکل بهش میگیم قبلی هارو بیا برامون اپدیت کن :
useEffect(() => {
console.log('number')
setInterval(() => {
setNumber(prev => prev + 1)
}, 1000)
}, [])
حالا بهتر شد ! کلا دوبار اجرا شد
ولی مشکلات تموم نشده اگر من بخوام کامپوننت رو یبار دیگه با یه استیت دیگه اجرا کنم باز به مشکل میخوریم
حتما حتما باید clean up function داشته باشیم :
بریم یکم ریز تر شیم ببینیم پشت صحنه چه اتفاقی میوفته :
به جای اینکه بیایم کاری که تو رندر قبلی رو انجام دادیم کنسل کنیم یه کلین اپ فانکشن رو اجرا میکنیم یعنی قبل از اینکه افکت واقعی رخ بده بیا کامپوننت رو برامون unmountکن و همین باعث میشه مشکلات حافظه ای رخ نده و در نتیجه سرعت و پرفورمنس اپ بهینه میشه
زمانی اینکار رو انجام بدین که مثلا داخل یک اسکرینی هستید و میخواید کل اسکرین به یه listener ای حساس باشه و نیازه که اگر تغییر کرد شما یوزافکت رو دوباره اجرا کنید وقتی میخواین از این اسکرین خارج بشید دیگه نیازی ندارید به اون listener پس میاین unmount اش میکنید به وسیله ی clean up function داخل یوزافکت
این موضوع برای فتچ کردن دیتا هم خیلی کاربردیه تو پست های بعدی راجب AboartController بیشتر میگم مرسی که تا اینجا همراهی کردید :)
