درود دوستان 👋 می‌خوایم تابعی رو توی ری‌اکت بررسی کنیم به اسم memo() که استفاده از اون ممکنه خیلی کاربردی و جذاب به نظر بیاد، اما نکته‌ها و بایدها و نبایدهایی داره بهتره قبل از استفاده اونها رو بدونیم. این پست از مجموعه پست‌های ری‌اکت ۱۰۱ هست که شامل مجموعه‌ای از پست‌های کوتاه و کاربردی ری‌اکتی میشه.

 

تابع memo() چیه؟ 🤔

memo یک Higher-order Function هست که یک کامپوننت رو می‌گیره و حالت بهینه‌شدهٔ اون رو تحویل میده. به بیان فنی‌تر، این تابع برای Memoize کردن (به خاطر سپردن) خروجی یک کامپوننت به کار میره. توی این حالت، کامپوننت فقط زمانی ری‌-رندر میشه که Prop های اون تغییر کنه:

import { memo } from 'react';

function MyComponent(props) {
  // ...

  return (
    <>...</>
  );
}

const Memoized = <<memo(MyComponent)>>;

export default Memoized;

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

 

چه زمانی از memo استفاده کنیم؟

توی ادامه می‌خوایم شرایطی رو بررسی کنیم که استفاده از memo پیشنهاد میشه.

 

۱. کامپوننت دارای رندرهای سنگین

یکی از شرایطی که استفاده از memo خیلی اهمیت پیدا می‌کنه شرایطی هست که کامپوننت ما دارای رندر خیلی پیچیده و سنگینی هست و هر بار رندر شدن اون هزینهٔ قابل ملاحظه‌ای داره. بنابراین استفاده از memo ترفند هوشمندانه‌ای به حساب میاد.

 

۲. کامپوننتی که دفعات زیادی در معرض ری‌-رندر هست

همونطور که گفتیم memo زمانی از رندر اضافی جلوگیری می‌کنه که پراپرتی‌های کامپوننت تغییر نکنه. و اگه کامپوننتی داریم که در معرض رندرهای زیاد هست (مثل تغییر توی کامپوننت والدِ اون که در نتیجه باعث رندر شدن مجدد کامپوننت‌های داخلی میشه،) اگه پراپرتی‌های اون بدون تغییر باقی می‌مونه بهتره که از memo استفاده کنیم تا از رندرهای اضافی جلوگیری کنیم.

 

خب حالا می‌خوایم موضوع مهم این پست رو بررسی کنیم، یعنی:

چه زمانی از memo استفاده نکنیم؟

باید بدونیم که استفاده از memo بی هزینه هم نیست و استفاده از اون توی شرایطی ممکنه نتایج معکوس بده و بجای افزایش بهینگی، پیچیدگی و افت سرعت و باگ‌های ناشناخته دریافت کنیم.