هوک useCallback ری اکت یکی از مهمترین هوک هایی هست که هر React Developer ، باید تسلط خوبی بهش داشته باشه . در واقع هوک useCallback تو بحث Performance به ما کمک میکنه تا سایت بهینه تری داشته باشیم.
هوک useCallback ، توابع ( function ) های شمارو کش میکنه و در هر re-Render اون توابع مجدد ساخته ( re-Creation ) نمیشن ! و از حافظه cashe خونده میشن .
هوک useCallback در ری اکت با جلوگیری از re-Render های اضافه و کاهش زمان re-Render ها باعث بهینه سازی و بهبود عملکرد اپیکیشن ما میشه.
عملکرد هوک useCallback تقریبا مثل هوک useMemo هست اما تفاوت هایی باهمدیگه دارن.
با فِرانت اِندی همراه باشید که میخوایم این هوک خفن رو تخصصی بررسی کنیم ?
اما قبل از اینکه بریم سراغ هوک ()useCallback لازمه با مفهوم Functions erquality آشنا باشید .
برای فهمیدن اینکه useCallback دقیقا چیکار میکنه باید دو تا مفهوم رو باهم بررسی کنیم : referential equality و function equality ..
توابع یا همون Function ها تو جاوااسکریپت مثل Variable ها ( متغیر ها ) رفتار میکنن.
یعنی ما همونطور که میتونیم یک متغیر رو به عنوان آرگومان به تابع پاس بدیم ، میتونیم یک تابع رو هم به عنوان آرگومان به یک تابع پاس بدیم.
پس میتونیم با یک تابع مثل متغیر رفتار کنیم : یعنی به عنوان آرگومان به یک تابع بدیمش ، تابع رو تو یه تابع دیگه return کنیم ، بریزیمش داخل یک متغیر و درکل هربلایی که میشه سر یه variable اورد ، سر تابع هم میشه اورد!
به مثال زیر دفت کنید تا متوجه بشید :
// Numbers function function sumFunctionNumbers() { return (a, b) => a + b; } const function1 = sumFunctionNumbers(); const function2 = sumFunctionNumbers(); function1(2, 3); // expected output: 5 function2(2, 3); // expected output: 5 console.log(function1 === function2); // expected output: false
تو تیکه کد بالا یه تابع ساختیم به اسم sumFunctionNumbers .
حالا این تابع رو ریختیم داخل 2 تا متغیر به اسم function1 و function2 .
تو خط 14 این 2 تابع که منطق یکسانی دارن رو باهم مقایسه کردیم ولی بهمون False برگردوند ! دلیل این موضوع این هست که این 2 تابع آدرس های متفاوتی در حافظه دارن و از دید جاوااسکریپت با همدیگه متفاوت هستن.
اما حقیقت موضوع اینه که این 2 تابع یکسان هستن ! خب حالا بریم سراغ هوک useCallback ری اکت …
تو ری اکت زمانیکه یک کامپوننت re-Render میشه ، تمامی function های موجود در اون کامپوننت مجدد ساخته میشن و یک جای جدید در حافظه اِشغال میکنن.
هوک useCallback از تابع شما یک instance ( نمونه ) میسازه و تا زمانیکه dependencies های اون تغییر نکنه ، تو re-Render های بعدی به هیچ عنوان تابع شما مجدد ساخته نمیشه و جای جدید در حافظه اِشغال نمیکنه:
const x = useCallback(callback, dependencies)
تو تیکه کد بالا نحوه استفاده از هوک useCallback در react مشخص شده .
تو بخش callback باید تابع خودتون و تو بخش dependenies باید مواردی رو ذکر کنید که میخواید در صورت تغییر پیدا کردنشون ، تایع شما مجدد ساخته بشه. در نهایت یک تابع memo شده return میشه که داخل متغیر x ذخیره میشه .
استفاده از هوک useCallback در ری اکت بشدت کاربردی و مهمه !!
چون بجای ساختن function های موجود در کامپوننت در هر re-Render ، فقط زمانی که dependencies ها تغییر میکنن اون توابع مجدد ساخته میشن.
تو تیکه کد زیر ما یک تابع memo شده به کمک useCallback ساختیم که در هر بار re-Render مجدد ساخته نمیشه !
const momoizedFunction = useCallback(() => { // the callback function to be memoized }, []); // dependencies array
هر زمان تغییر نتیجه State کامپوننت پدر ، در کامپوننت فرزند تاثیر گذار نیست باید از هوک useCallback استفاده کرد .
یعنی فرض کنید State کامپوننت پدر تغییر میکند. اگر این تغییر state هیچ ارتباطی به کامپوننت فرزند ندارد باید از هوک useCallback استفاده کرد .
اما درصورتیکه این تغییر State باعث تغییر نتیجه در کامپوننت فرزند میبشود ، پس نیازی به useCallback نیست و باید اجازه دهیم re-Render و re-Creation رخ دهد .
دوستان لطفا برای مطالعه ادامه این مقاله + کد ها و مثال های بیشتر در مورد هوک useCallback روی لینک زیر کلیک کنید :
