در این قسمت به بررسی هوک useCallback می پردازیم . برای آشنایی بیشتر با این هوک بهتر است یکی از مفاهیم زیرساختی جاوااسکریپت را بررسی کنیم.
در جاوااسکریپت توابع نیز نوعی آبجکت هستند. همانطور که میدانید در جاوااسکریپت آبجکت ها تنها با خودشان برابر هستند. به مثال زیر دقت کنید :
همانطور که گفتیم توابع نیز نوعی آبجکت هستند پس توابع نیز از این قاعده مستثنی نیستند . به مثال زیر توجه کنید :
پس تا این لحظه متوجه شدیم که جاوااسکریپت با تعریف توابع به چه صورت برخورد میکند.
دلیل استفاده از useCallback در React هم به منظور رفع این مشکل است . در واقع در ری اکت هر تابع با هر رندر کامپوننت دوباره initialize یا تعریف میشود و این در بعضی اوقات باعث میشود کامپوننت های فرزند دوباره render شوند. برای رفع این مشکل از این هوک استفاده میشود . برای درک بهتر به مثال زیر توجه کنید :
مثال بالا یک شمارنده در ساده ترین حالت ممکن را پیاده سازی کردیم. همینطور یک فیلد متنی قرار دارد که هرچه در آن تایپ شود داخل کامپوننت Title نمایش داده میشود. حال قصد داریم بررسی کنیم که کامپوننت های Counter, Buttons , Titleدر چه حالاتی render میشوند. به همین دلیل داخل هر کامپوننت یک console قرار می دهیم.
اگر به خروجی کنسول دقت کنیم درصورتی که داخل اینپوت تایپ کنیم کامپوننت های Buttons نیز دوباره رندر میشود .
در صورتی که باید جلوی این رندر اضافه گرفته شود . ابتدا برای جلوگیری از رندر شدن کامپوننت های فرزند صرفا به دلیل آپدیت شدن استیت های Counter باید از memo استفاده کنیم .
اما چرا کامپوننت Buttons همچنان دوباره رندر میشوند ؟
دلیل این اتفاق، توضیحاتی است که در ابتدای مقاله به آن اشاره شد. با هر رندر دوباره ی Counter توابع increase/decrease دوباره تعریف میشوند. در نتیجه prop های کامپوننت Buttons دارای مقدار جدید میشوند و این کامپوننت نیز دوباره رندر میشود. برای جلوگیری از این اتفاق باید از useCallback استفاده شود. به صورت زیر:
همانطور که مشاهده میکنید useCallback یک پارامتر به صورت آرایه ای دریافت میکند . به این شکل که در صورتی که مقادیر داخل آرایه تغییر کند تابع داخل useCallback دوباره تعریف میشوند.
حال خروجی کنسول به شکل زیر درمی آید :
دقت کنید که memo برای جلوگیری از رندر شدن اضافه کامپوننت ها استفاده میشود ، درصورتی که useCallback برای جلوگیری از تعریف اضافه ی توابع داخل کامپوننت ها استفاده می شود.
