React useMemo: بهینه‌سازی عملکرد با مموایزیشن

در دنیای توسعه ری‌اکت، عملکرد از اهمیت بالایی برخوردار است. با افزایش پیچیدگی اپلیکیشن‌ها، اطمینان از تجربه‌ی کاربری روان و پاسخگو به طور فزاینده‌ای حیاتی می‌شود. یکی از ابزارهای قدرتمند در زرادخانه ری‌اکت برای بهینه‌سازی عملکرد، هوک useMemo است. این هوک به شما اجازه می‌دهد تا نتیجه محاسبات سنگین را مموایز (memoize) یا کَش کنید، و از محاسبات مجدد غیرضروری جلوگیری کرده و کارایی اپلیکیشن خود را بهبود ببخشید.

درک مفهوم مموایزیشن (Memoization)

در هسته‌ی خود، مموایزیشن یک تکنیک برای بهینه‌سازی توابع است که با ذخیره کردن نتایج فراخوانی‌های سنگین تابع و بازگرداندن نتیجه‌ی کَش‌شده در صورت تکرار ورودی‌های یکسان، عمل می‌کند. به جای انجام مکرر محاسبات، تابع به سادگی مقدار محاسبه‌شده‌ی قبلی را بازیابی می‌کند. این امر می‌تواند به طور قابل توجهی زمان و منابع مورد نیاز برای اجرای تابع را کاهش دهد، به خصوص هنگام کار با محاسبات پیچیده یا مجموعه داده‌های بزرگ.

تصور کنید تابعی دارید که فاکتوریل یک عدد را محاسبه می‌کند. محاسبه فاکتوریل یک عدد بزرگ می‌تواند از نظر محاسباتی سنگین باشد. مموایزیشن می‌تواند با ذخیره کردن فاکتوریل هر عددی که قبلاً محاسبه شده است، کمک کند. دفعه بعد که تابع با همان عدد فراخوانی شود، می‌تواند به سادگی نتیجه ذخیره‌شده را به جای محاسبه مجدد آن، بازیابی کند.

معرفی هوک useMemo در React

هوک useMemo در ری‌اکت راهی برای مموایز کردن مقادیر در کامپوننت‌های تابعی فراهم می‌کند. این هوک دو آرگومان می‌پذیرد:

• یک تابع که محاسبات را انجام می‌دهد.
• یک آرایه از وابستگی‌ها (dependencies).

هوک useMemo فقط زمانی تابع را دوباره اجرا می‌کند که یکی از وابستگی‌های موجود در آرایه تغییر کند. اگر وابستگی‌ها یکسان باقی بمانند، مقدار کَش‌شده از رندر قبلی را باز می‌گرداند. این کار از اجرای غیرضروری تابع جلوگیری می‌کند، که می‌تواند به طور قابل توجهی عملکرد را بهبود بخشد، به خصوص هنگام کار با محاسبات سنگین.

سینتکس useMemo

سینتکس useMemo ساده است:

const memoizedValue = useMemo(() => {
  // محاسبه سنگین در اینجا
  return computeExpensiveValue(a, b);
}, [a, b]);

در این مثال، computeExpensiveValue(a, b) تابعی است که محاسبات سنگین را انجام می‌دهد. آرایه [a, b] وابستگی‌ها را مشخص می‌کند. هوک useMemo فقط در صورتی تابع computeExpensiveValue را دوباره اجرا می‌کند که a یا b تغییر کند. در غیر این صورت، مقدار کَش‌شده از رندر قبلی را باز می‌گرداند.

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

useMemo در سناریوهای زیر بیشترین فایده را دارد:

• محاسبات سنگین: زمانی که تابعی دارید که یک کار محاسباتی فشرده انجام می‌دهد، مانند تبدیل داده‌های پیچیده یا فیلتر کردن مجموعه داده‌های بزرگ.
• بررسی برابری ارجاعی (Referential Equality): زمانی که باید اطمینان حاصل کنید که یک مقدار فقط زمانی تغییر می‌کند که وابستگی‌های زیربنایی آن تغییر کنند، به خصوص هنگام ارسال مقادیر به عنوان props به کامپوننت‌های فرزندی که از React.memo استفاده می‌کنند.
• جلوگیری از رندرهای مجدد غیرضروری: زمانی که می‌خواهید از رندر مجدد یک کامپوننت جلوگیری کنید، مگر اینکه props یا state آن واقعاً تغییر کرده باشد.

بیایید با مثال‌های عملی به هر یک از این سناریوها بپردازیم.

سناریو ۱: محاسبات سنگین

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

const UserList = ({ users, filter }) => {
  const filteredUsers = useMemo(() => {
    console.log('فیلتر کردن کاربران...'); // شبیه‌سازی محاسبه سنگین
    return users.filter(user => user.name.toLowerCase().includes(filter.toLowerCase()));
  }, [users, filter]);

  return (
    

      {filteredUsers.map(user => (
        
{user.name}
      ))}
    
  );
};

در این مثال، متغیر filteredUsers با استفاده از useMemo مموایز شده است. منطق فیلتر کردن فقط زمانی دوباره اجرا می‌شود که آرایه users یا مقدار filter تغییر کند. اگر آرایه users و مقدار filter یکسان باقی بمانند، هوک useMemo آرایه filteredUsers کَش‌شده را باز می‌گرداند و از اجرای غیرضروری منطق فیلتر کردن جلوگیری می‌کند.

سناریو ۲: بررسی برابری ارجاعی (Referential Equality)

هنگام ارسال مقادیر به عنوان props به کامپوننت‌های فرزندی که از React.memo استفاده می‌کنند، اطمینان از اینکه props فقط زمانی تغییر می‌کند که وابستگی‌های زیربنایی آنها تغییر کرده باشند، حیاتی است. در غیر این صورت، کامپوننت فرزند ممکن است به طور غیرضروری دوباره رندر شود، حتی اگر داده‌هایی که نمایش می‌دهد تغییر نکرده باشد.

const MyComponent = React.memo(({ data }) => {
  console.log('کامپوننت MyComponent دوباره رندر شد!');
  return 
{data.value}
;
});

const ParentComponent = () => {
  const [a, setA] = React.useState(1);
  const [b, setB] = React.useState(2);

  const data = useMemo(() => ({
    value: a + b,
  }), [a, b]);

  return (
    

      
       setA(a + 1)}>Increment A
       setB(b + 1)}>Increment B
    
  );
};

در این مثال، شیء data با استفاده از useMemo مموایز شده است. کامپوننت MyComponent که با React.memo پوشانده شده، فقط زمانی دوباره رندر می‌شود که prop data تغییر کند. از آنجایی که data مموایز شده است، فقط زمانی تغییر می‌کند که a یا b تغییر کند. بدون useMemo، یک شیء data جدید در هر رندر ParentComponent ایجاد می‌شد و باعث می‌شد MyComponent به طور غیرضروری دوباره رندر شود، حتی اگر مقدار a + b یکسان باقی می‌ماند.

سناریو ۳: جلوگیری از رندرهای مجدد غیرضروری

گاهی اوقات، ممکن است بخواهید از رندر مجدد یک کامپوننت جلوگیری کنید مگر اینکه props یا state آن واقعاً تغییر کرده باشد. این امر می‌تواند برای بهینه‌سازی عملکرد کامپوننت‌های پیچیده‌ای که دارای کامپوننت‌های فرزند زیادی هستند، بسیار مفید باشد.

const MyComponent = ({ config }) => {
  const processedConfig = useMemo(() => {
    // پردازش شیء config (عملیات سنگین)
    console.log('پردازش config...');
    let result = {...config}; // یک مثال ساده، اما می‌تواند پیچیده باشد
    if (result.theme === 'dark') {
        result.textColor = 'white';
    } else {
        result.textColor = 'black';
    }
    return result;
  }, [config]);

  return (
    

      
{processedConfig.title}
      
{processedConfig.description}
    
  );
};

const App = () => {
  const [theme, setTheme] = React.useState('light');
  const config = useMemo(() => ({
      title: 'My App', 
      description: 'This is a sample app.',
      theme: theme
  }), [theme]);

  return (
    

      
       setTheme(theme === 'light' ? 'dark' : 'light')}>Toggle Theme
    
  );
};

در این مثال، شیء processedConfig بر اساس prop config مموایز شده است. منطق پردازش سنگین config فقط زمانی اجرا می‌شود که خود شیء config تغییر کند (یعنی زمانی که تم تغییر می‌کند). نکته مهم این است که حتی اگر شیء `config` در کامپوننت `App` هر بار که `App` دوباره رندر می‌شود، بازتعریف شود، استفاده از `useMemo` تضمین می‌کند که شیء `config` فقط زمانی واقعاً *تغییر* خواهد کرد که خود متغیر `theme` تغییر کند. بدون هوک `useMemo` در کامپوننت `App`، یک شیء `config` جدید در هر رندر `App` ایجاد می‌شد و باعث می‌شد `MyComponent` هر بار `processedConfig` را دوباره محاسبه کند، حتی اگر داده‌های زیربنایی (تم) در واقع یکسان بودند.

اشتباهات رایج که باید از آن‌ها اجتناب کرد

در حالی که useMemo یک ابزار قدرتمند است، استفاده هوشمندانه از آن مهم است. استفاده بیش از حد از useMemo در واقع می‌تواند عملکرد را کاهش دهد اگر سربار مدیریت مقادیر مموایز شده از مزایای جلوگیری از محاسبات مجدد بیشتر باشد.

• مموایز کردن بیش از حد: همه چیز را مموایز نکنید! فقط مقادیری را مموایز کنید که محاسبه آنها واقعاً سنگین است یا در بررسی‌های برابری ارجاعی استفاده می‌شوند.
• وابستگی‌های نادرست: اطمینان حاصل کنید که تمام وابستگی‌هایی که تابع به آنها متکی است را در آرایه وابستگی‌ها قرار دهید. در غیر این صورت، مقدار مموایز شده ممکن است کهنه شود و منجر به رفتار غیرمنتظره شود.
• فراموش کردن وابستگی‌ها: فراموش کردن یک وابستگی می‌تواند منجر به باگ‌های ظریفی شود که ردیابی آنها دشوار است. همیشه آرایه‌های وابستگی خود را دوباره بررسی کنید تا از کامل بودن آنها اطمینان حاصل کنید.
• بهینه‌سازی زودهنگام: به طور زودهنگام بهینه‌سازی نکنید. فقط زمانی بهینه‌سازی کنید که یک گلوگاه عملکردی را شناسایی کرده‌اید. از ابزارهای پروفایلینگ برای شناسایی بخش‌هایی از کد خود که واقعاً باعث مشکلات عملکردی می‌شوند، استفاده کنید.

جایگزین‌های useMemo

در حالی که useMemo یک ابزار قدرتمند برای مموایز کردن مقادیر است، تکنیک‌های دیگری نیز وجود دارند که می‌توانید برای بهینه‌سازی عملکرد در اپلیکیشن‌های ری‌اکت از آنها استفاده کنید.

• React.memo: React.memo یک کامپوننت مرتبه بالاتر (higher-order component) است که یک کامپوننت تابعی را مموایز می‌کند. این کار از رندر مجدد کامپوننت جلوگیری می‌کند مگر اینکه props آن تغییر کرده باشد. این برای بهینه‌سازی عملکرد کامپوننت‌هایی که به طور مکرر props یکسانی دریافت می‌کنند، مفید است.
• PureComponent (برای کامپوننت‌های کلاسی): مشابه React.memo، PureComponent یک مقایسه سطحی از props و state انجام می‌دهد تا تعیین کند آیا کامپوننت باید دوباره رندر شود یا نه.
• تقسیم کد (Code Splitting): تقسیم کد به شما اجازه می‌دهد تا اپلیکیشن خود را به بسته‌های کوچکتری تقسیم کنید که می‌توانند بر حسب تقاضا بارگذاری شوند. این کار می‌تواند زمان بارگذاری اولیه اپلیکیشن شما را بهبود بخشد و مقدار کدی که نیاز به تجزیه و اجرا دارد را کاهش دهد.
• Debouncing و Throttling: Debouncing و Throttling تکنیک‌هایی هستند که برای محدود کردن نرخ اجرای یک تابع استفاده می‌شوند. این می‌تواند برای بهینه‌سازی عملکرد کنترل‌کننده‌های رویدادی که به طور مکرر فعال می‌شوند، مانند کنترل‌کننده‌های اسکرول یا تغییر اندازه، مفید باشد.

مثال‌های عملی از سراسر جهان

بیایید به چند نمونه از چگونگی استفاده از useMemo در زمینه‌های مختلف در سراسر جهان نگاهی بیندازیم:

• تجارت الکترونیک (جهانی): یک پلتفرم تجارت الکترونیک جهانی ممکن است از useMemo برای کَش کردن نتایج عملیات پیچیده فیلتر و مرتب‌سازی محصولات استفاده کند تا یک تجربه خرید سریع و پاسخگو را برای کاربران در سراسر جهان، صرف نظر از موقعیت مکانی یا سرعت اینترنت آنها، تضمین کند. به عنوان مثال، کاربری در توکیو که محصولات را بر اساس محدوده قیمت و موجودی فیلتر می‌کند، از یک تابع فیلتر مموایز شده بهره‌مند خواهد شد.
• داشبورد مالی (بین‌المللی): یک داشبورد مالی که قیمت‌های لحظه‌ای سهام و داده‌های بازار را نمایش می‌دهد، می‌تواند از useMemo برای کَش کردن نتایج محاسبات مربوط به شاخص‌های مالی مانند میانگین‌های متحرک یا معیارهای نوسان استفاده کند. این کار از کند شدن داشبورد هنگام نمایش حجم زیادی از داده‌ها جلوگیری می‌کند. یک معامله‌گر در لندن که عملکرد سهام را نظارت می‌کند، به‌روزرسانی‌های روان‌تری را مشاهده خواهد کرد.
• اپلیکیشن نقشه (منطقه‌ای): یک اپلیکیشن نقشه که داده‌های جغرافیایی را نمایش می‌دهد، می‌تواند از useMemo برای کَش کردن نتایج محاسبات مربوط به پروجکشن‌های نقشه و تبدیل مختصات استفاده کند. این کار عملکرد اپلیکیشن را هنگام بزرگ‌نمایی و جابجایی نقشه بهبود می‌بخشد، به خصوص هنگام کار با مجموعه داده‌های بزرگ یا سبک‌های نقشه پیچیده. کاربری که در حال کاوش در نقشه دقیق جنگل‌های آمازون است، رندر سریع‌تری را تجربه خواهد کرد.
• اپلیکیشن ترجمه زبان (چند زبانه): یک اپلیکیشن ترجمه زبان را تصور کنید که نیاز به پردازش و نمایش بخش‌های بزرگی از متن ترجمه شده دارد. useMemo می‌تواند برای مموایز کردن قالب‌بندی و رندر متن استفاده شود تا یک تجربه کاربری روان را تضمین کند، صرف نظر از زبانی که نمایش داده می‌شود. این امر به ویژه برای زبان‌هایی با مجموعه‌های کاراکتر پیچیده مانند چینی یا عربی مهم است.

نتیجه‌گیری

هوک useMemo ابزاری ارزشمند برای بهینه‌سازی عملکرد اپلیکیشن‌های ری‌اکت است. با مموایز کردن محاسبات سنگین و جلوگیری از رندرهای مجدد غیرضروری، می‌توانید به طور قابل توجهی سرعت و کارایی کد خود را بهبود ببخشید. با این حال، مهم است که از useMemo به طور هوشمندانه استفاده کنید و محدودیت‌های آن را درک کنید. استفاده بیش از حد از useMemo در واقع می‌تواند عملکرد را کاهش دهد، بنابراین حیاتی است که بخش‌هایی از کد خود را که واقعاً باعث مشکلات عملکردی می‌شوند، شناسایی کرده و تلاش‌های بهینه‌سازی خود را بر روی آن بخش‌ها متمرکز کنید.

با درک اصول مموایزیشن و نحوه استفاده مؤثر از هوک useMemo، می‌توانید اپلیکیشن‌های ری‌اکت با کارایی بالا بسازید که یک تجربه کاربری روان و پاسخگو را برای کاربران در سراسر جهان ارائه می‌دهند. به یاد داشته باشید که کد خود را پروفایل کنید، گلوگاه‌ها را شناسایی کنید و useMemo را به صورت استراتژیک برای دستیابی به بهترین نتایج به کار ببرید.