هوک useCallback ری اکت و بررسی تخصصی useCallback

هوک useCallback ری اکت یکی از مهمترین هوک هایی هست که هر React Developer ، باید تسلط خوبی بهش داشته باشه . در واقع هوک useCallback تو بحث Performance به ما کمک میکنه تا سایت بهینه تری داشته باشیم.

هوک useCallback ری اکت

هوک useCallback ، توابع ( function ) های شمارو کش میکنه و در هر re-Render اون توابع مجدد ساخته ( re-Creation ) نمیشن ! و از حافظه cashe خونده میشن .

هوک useCallback در ری اکت با جلوگیری از re-Render های اضافه و کاهش زمان re-Render ها باعث بهینه سازی و بهبود عملکرد اپیکیشن ما میشه.

عملکرد هوک useCallback تقریبا مثل هوک useMemo هست اما تفاوت هایی باهمدیگه دارن.

با فِرانت اِندی همراه باشید که میخوایم این هوک خفن رو تخصصی بررسی کنیم 🙂

اما قبل از اینکه بریم سراغ هوک ()useCallback لازمه با مفهوم Functions erquality آشنا باشید .

مفهوم Function equality به چه معناست ؟

برای فهمیدن اینکه 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 ری اکت …

هوک 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

چه زمانی از هوک ()useCallback استفاده کنیم ؟

هر زمان تغییر نتیجه State کامپوننت پدر ، در کامپوننت فرزند تاثیر گذار نیست باید از هوک useCallback استفاده کرد .

یعنی فرض کنید State کامپوننت پدر تغییر میکند. اگر این تغییر state هیچ ارتباطی به کامپوننت فرزند ندارد باید از هوک useCallback استفاده کرد .

اما درصورتیکه این تغییر State باعث تغییر نتیجه در کامپوننت فرزند میبشود ، پس نیازی به useCallback نیست و باید اجازه دهیم re-Render و re-Creation رخ دهد .

چه زمانی از هوک ()useCallback ری اکت استفاده نکنیم ؟

برخی هوک ها خیلی مفید و کاربردی هستن ولی دلیل نمیشه که ازشون هرجایی بصورت بی رویه و بدون دلیل استفاده کنیم !

اتفاقا استفاده بی رویه از هوک های مفید ( مثل هوک useMemo ) قطعا تاثیرات منفی روی Performance اپیکیشن شما داره.

در برخی موارد نیازی به useCallback ری اکت نیست و بهتره اجازه بدیم با هربار re-Render ، توابع ما مجدد ساخته بشن.

استفاده بی رویه از هوک ()useCallback در درجه اول باعث پیچیدگی کد اپیکیشن شما میشه .

ضمن اینکه با هر بار re-Render شدن کامپوننت ، useCallback اجرا میشه و Dependencies هارو چک میکنه که تغییری داشتن یا بدون تغییر بودن. همین پروسه خودش هزینه داره و زمانبر هست.

تو مثال زیر نیازی به هوک useCallback در react نداریم و نباید ازش استفاده میکردیم :

export default function App() {


  const clickHandler = useCallback(() => {
    // handle the click event
  }, []);

  return <ButtonWrapper onClick={clickHandler} />;
}

const ButtonWrapper = ({ clickHandler }) => {
  return <button onClick={clickHandler}>Child Component</button>;
};

اما بریم سراغ یه سوال پرتکرار در مورد این هوک

برای مطالعه ادامه این مقاله + تیکه کد ها و مثالهای بیشتر لطفا روی لینک زیر کلیک کنید :

useCallback در ری اکت