هوک useMemo و بررسی تخصصی ()React.useMemo در ری اکت

زمانیکه نسخه 16.8 ری اکت منتشر شد یه عالمه هوک باحال بهش اضافه شد مثل هوک useMemo ! در حقیقت هوک useMemo ری اکت به بهینه سازی اپیکیشن ما و بهبود Performance پروژمون کمک میکنه.

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

اصلا Memoization چی هست و چرا باید ازش استفاده کنیم ؟

زمانیکه که وضعیت / state یک کامپوننت تو ری اکت تغییر میکنه ، ری اکت اون کامپوننت و همه فرزندانش ( کامپوننت های فرزند ) رو re-Render میکنه.

گاهی اوغات ممکنه کامپوننت فرزند هیچ تغییری نکرده باشه ولی به این دلیل که کامپوننت پدر تغییر حالتی داشته ، ری اکت کامپوننت پدر و تمامی کامپوننت های فرزند رو re-Render میکنه ( بدون توجه به اینکه کامپوننت های فرزند بدون تغییر بودن )

چنین re-Render های بیهوده ای قطعا هزینه بر هستن و Performance اپیکیشن مارو کاهش میدن .

به عنوان یک Front-End Enginner باید تمام تلاش خودمون رو بکنیم که یک اپیکیشن بهینه، با Performance عالی داشته باشیم .

خود ری اکت برای حل این مشکل memo رو معرفی کرد . اگه با memo آشنایی ندارید حتما قبل از ادامه دادن این مقاله ، ابزار ()memo و بررسی تخصصی React.memo رو مطالعه کنید چون هوک useMemo بر پایه ابزار memo نوشته شده .

هوک useMemo چیست ؟

هوک useMemo در ری اکت  نتیجه یک تابع رو برای بار اول محاسبه میکنه و نتیجش رو داخل حافظش ذخیره میکنه.

حالا تو re-Render های بعدی  ، اون تابع اجرا نمیشه و هیچگونه محاسبه جدیدی انجام نمیده و همون نتیجه ای که قبلا داخل حافظه ذخیره کرده بودیم رو  برمیگردونه ( تا زمانیکیه ورودی های تابع تغییر کنه )

خب این فوق العادس ? چرا ؟

چون برخی تابع ها خیلی سنگین هستن و محاسبات پیچیده ای دارن. به کمک هوک ()useMemo میتونیم یکبار این تابع رو render کنیم و نتیجش رو داخل حافظه بسپریم. تو re-Render های بعدی دیگه این تابع محاسبه نمیشه و از همون نتیجه ای که داخل حافظه داریم استفاده میکنیم .

با Memoization میتونی پروژت رو خیلی خیلی بهینه تر کنی !

تکنیک Memoization به شما کمک میکنه Performance اپیکیشن خودتونو بشدت بهبود بدید.

اما یه نکته خیلی مهم اینجا وجود داره :

استفاده نادرست از ()useMemo ممنوع !

اکثر React Developer ها چون فکر میکنن Memoization تکنیک خیلی خوبیه برای بهبود Performance پروژه ، از اون همه جا استفاده میکنن ( استفاده بی رویه ). اما استفاده نادرست باعث میشه که Performance پروژتون از حالت عادی هم ضعیف تر بشه. ( چون خود useMemo محاسبات انجام میده )

از هوک ()useMemo فقط برای محاسبات سنگین و پیچیده استفاده کنید !

از هوک useMemo فقط برای تابع هایی که محاسبات سنگین و پیچیده ای دارن استفاده کنید . فراموش نکنید که استفاده از هوک React.useMemo برای توابع ساده نتیجه عکس داره.

در حقیقت خود useMemo داره یکسری محاسبات انجام میده و اگه از useMemo برای جاهایی که نیاز به Memoization نداریم استفاده کنیم ، در حقیقت کلی محاسبه اضافی به پروژمون اضافه کردیم .

• بطور مثال تو کامپوننت زیر از useMemo برای یک تابع خیلی ساده استفاده کردیم که اینجا اصلا نیازی به Memoization  نداریم !

const App({name, family}) {
  const createFullName = useMemo(() => {
     return name+family
  }, [name, family]) // اینجا مواردی  رو مشخص میکنیم که میخوایم درصورت تغییر مقدار ، تابع مجدد اجرا بشه

  return <ExpensiveComponent fullName={createFullName}/>
}

با کلیک روی لینک زیر ادامه این آموزش رو در وبلاگ فِرانت اِندی مطالعه کنید :

هوک useMemo در ری اکت

FrontEndi.com