همراه با تغییرات state ها در کامپوننتها، بدنه کامپوننت دوباره اجرا میشود، توابع نیز از این قاعده مستثنی نیستند یعنی همراه با آپدیت هر کدام از استیتها، حتی توابعی که وابستگی به آن استیت ندارند، بازتعریف میشوند. به مثال زیر دقت کنید:
تابع myCallbackFunction هیچ وابستگی به استیتهای result و darkMode ندارد، اما همزمان با تغییرات darkMode و result دوباره بازتعریف میشود. این بازتعریف می تواند مشکلاتی به همراه داشته باشد:
همان طور که در مثال بالا قابل مشاهده است، همگام با بازتعریف تابع myCallbackFunction کامپوننت HandleResult نیز ریرندر خواهد شد، برای حل این مشکل میتوانیم از هوک useCallback استفاده کنیم:
هوک useCallback دو ورودی دریافت میکند:
تابع fn:هوک useCallback بعنوان اولین ورودی یک تابع دریافت میکند. این تابع در اولین رندر دریافت و کش خواهد شد. تا زمانی که هیچکدام از وابستگی های این تابع تغییر نکنند، تابع fn بازتعریف نخواهد شد.
آرایه وابستگیها یا dependencies array: ورودی دوم آرایه ای از لیست مقادیری (شامل استیت، پراپز و یا هرچیزی) است که نتیجه تابع fn به آنها بستگی دارد. با تغییر مقدار هرکدام از وابستگیها تابع بازتعریف میشود.
هوک useCallback تابع کش شده و قابل استفاده در کامپوننت را بازمیگرداند.
نتیجه تابع myCallbackFunction به مقدار استیت number وابسته است، بنابراین فقط با تغییر مقدار number این تابع بازتعریف خواهد شد و هنگام تغییر سایر استیتها بازتعریف نخواهد شد:
کامپوننت Button را در نظر بگیرید، این کامپوننت که با هربار تغییر پراپ onClick به مدت یک ثانیه در دسترس نخواهد بود، با استفاده از memo کش میشود و تا وقتی که props های آن تغییر نکنند، ریرندر نمیشود:
در مثال زیر توابع decrement و increment بعنوان پراپ onClick به کامپوننت Button پاس داده شده اند:
همان طور که مشخص است، نتیجه توابع decrement و increment هیچ وابستگی به استیت count ندارد و فقط به استیت inc وابسته است، اما با تغییر استیت count، این دوتابع نیز بازتعریف شده و در نتیجه کامپوننهای Button ریرندر میگردند و با هر بار ریرندر کامپوننتهای Button، دکمه ها برای یک ثانیه در دسترس نخواهند بود. برای حل این مشکل، با استفاده از هوک useCallback توابع decrement و increment را کش خواهیم کرد:
نتیجه استفاده از هوک useMemo این میشود که فقط با تغییر inc توابع increment و decrement بازتعریف شده و تغییر count تاثیری روی ریرندر شدن Button نخواهد داشت. هوک useCallback با کش کردن تابع، جلوی ریرندرهای اضافه را میگیرد.