به کمک هوک های useCallback و useMemo میتونیم از re-render های غیر ضروری جلوگیری، و کد بهینه تری داشته باشیم.
اول یکم هوک. هوک ها ویژگی جدید ری‌اکت هستن که اجازه میدن از ویژگی های کلاس ها توی کامپوننت های فانکشنال استفاده بشه. با هوک ها میتونیم استیت بسازیم و از متد های لایف سایکل استفاده کنیم.
با useState میتونیم برای متغیرمون استیت بسازیم:
const [value, setValue] = useState(defaultValue)
با useEffect میتونیم ساید افکت بسازیم:
useEffect(() => { //code goes here... , [dependency] });
آرایه داده شده توی پارامتر ها این اجازه رو میده که وقتی مقداری از آرایه تغییر کرد ساید افکت رو انجام بده. این طوری میتونیم متد لایف سایکل بسازیم.
مثلا با هوک میتونیم به اپ حالت شب اضافه کنیم، یا مثلا با استیت ها فرم بسازیم.
و اما useCallback و useMemo. هر دو یه تابع و یه آرایه از dependency ها رو ورودی میگیرن. اگه یکی از مقادیر آرایه تغییر کنه خروجی عوض میشه و اگه تغییر نکنه، مقدار کش شده برگردونده میشه.
useCallback( someFunction() }, [dependencies]) useMemo(() => { someFunction() }, [dependencies])
باید بدونیم که اگه آرایه خالی بجای dependency ها بدیم بهش، یا اصلا آرایه ندیم، useCallback یک کال‌بک ذخیره شده، و useMemo یک مقدار ذخیره شده که نتیجه‌ی پارامتر های تابع هست رو بر میگردونه.
اگه با حجم زیادی از دیتا سروکار داریم، useMemo انتخاب خوبیه چون کار رو یکبار با اولین رندر انجام میده و بعد از اون ورژن کش شده رو با هر رندر بر میگردونه.
اما useCallback یکم متفاوته. برای مثال، یه کامپوننت مادر که زیاد re-render میشه، توی کامپوننت مادر یه کامپوننت فرزند داریم که یه تابع میگیره. با هر بار re-render شدن کامپوننت مادر، تابع فرزند اجرا میشه، بدون اینکه لزومی داشته باشه. حالا اگه useCallback رو بجای یک prop بدیم، مشکل حل میشه. چون تابع وقتی اجرا میشه که آرایه dependency تغییر کنه. پس هر re-render یک تابع کش شده میگیره و باز اجرا نمیشه، مگر وقتی که لازم باشه.
