یوزافکت به تنهایی خیلی کاربردیه ولی وقتی اشتباه استفاده میشه میتونه کامپوننت رو وادار کنه که هی رندر بشه، (حالا تصور کن توی بیست تا کامپوننت اشتباه استفاده شده ?) در نتیجه، اپ در بلند مدت کند میشه و مشکلات مموری و حافظه پیدا میکنه
اولا توی پست قبلی گفته بودم ریکت 18 یوزافکتش دوبار رندر میشه ، میتونی با لینک زیر بری ببینی چه خبره !
https://virgool.io/@blue_cherry_lady/%D8%B1%DB%8C%DA%A9%D8%AA-18-%DB%8C%D9%88%D8%B2%D8%A7%D9%81%DA%A9%D8%AA-%D8%AF%D9%88%D8%A8%D8%A7%D8%B1-%D8%A7%D8%AC%D8%B1%D8%A7-%D9%85%DB%8C%D8%B4%D9%87-plommx4asdcg
با فرض اینکه strick mode رو داخل ریکت غیرفعال کنیم پیش میریم ، مثال زیر رو ببینیم :
ما به طور اساسی سه تا ایتم اصلی داریم :
داخل کامپوننت استیت count (0) رو داریم که با زدن روی دکمه ، هر سری یکی به قبلی ها اضافه میشه
کامپوننت به ریکت میگه که ببین بیا این کد html رو رندر کن :
<span> number : 0 </span>
ریکت میره به مرورگر میگه که تغییرات جدید برای DOM داریم و مرورگر هم میگه اوکی و نمایشش میده
مشکل اصلی اینجاست که یوزافکت با هر رندر اجرا میشه ، چرا؟چون دپندنسی نداره ! بریم یه مثال رو ببینیم:
همونطور که میبینید من اصلا count رو کلیک نکردم ولی به تعداد کلمات استیت name یوزافکت داره ران میشه !خب ما اینو نمیخوایم در نتیجه میایم از dependency استفاده میکنیم یعنی ران شدن یوزافکت رو وابسته میکنیم به استیتی که میخوایم در اصل داریم به ریکت میگیم هر وقت استیت مورد نظر عوض شد یا ابدیت شد برو و یوزافکت رو ران کن و دوباره کامپوننت رو رندر کن
بله همانطور که میبینید دیگه با اپدیت اسم ، یوزافکت ران نمیشه تا زمانی که count رو زیاد کنیم - فقط باید مراقب یک نکته ای باشیم اون هم تایپ استیت هاست مثال پایین رو باهم ببینیم
خب به یوز افکت و دپندنسیش توجه کنید . استیت ما از دوتا متغییر دیگه تشکیل شده من اسم رو داخل اینپوت اضافه میکنم و یکبار یورافکت اجرا میشه بعدش دکمه ی سلکت رو انتخاب میکنم در نتیجه یکبار دیگه یوزافکت اجرا میشه و این داره درست کار میکنه
ولی سوال اینجاست که اگر به زدن دکمه ها ادامه بدم ولی استیت هارو عوض نکنم یا اپدیت نکنم باز هم یوزافکت اجرا میشه؟
بله ! من هیچی رو عوض نکردم ولی با صدا زدن فانکشن ها بازم یوز افکت داره اجرا میشه
چرا این اتفاق میوفته ؟ بخاطر
primitive and non-primitive data types در مورد این ها داخل یک مقاله دیگه صحبت میکنم بریم راه حل رو ببینیم :
میتونید از هوک useMemo استفاده کنید
اینجوری هر وقت استیت ها عوض بشن کامپوننت هم رندر میشه یا معادلش میتونیم بنویسیم :
مابقی اش باشه برای پست های بعدی مرسی که تا اینجا همراهی کردید:)
