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

useMemo به شما امکان می‌دهد تا مقدار محاسبه شده ای را در حالت یادآوری (memoization) ذخیره کنید. به این ترتیب، اگر ورودی‌ها تغییر نکردند، دوباره محاسبه نخواهد شد. این امر به ویژه زمانی مفید است که محاسبه یک مقدار پرهزینه است.

کد زیر نمونه ای از استفاده از useMemo را نشان می‌دهد:

import React, { useMemo } from 'react';

function MyComponent({ data }) {
  const calculatedValue = useMemo(() => {
    console.log('Calculating...');
    // محاسبات پرهزینه
    let result = 0;
    for (let i = 0; i < data.length; i++) {
      result += data[i];
    }
    return result;
  }, [data]);

  return (

  );
}

export default MyComponent;

memo یک higher-order component (HOC) است که به شما امکان می‌دهد تا اجزای React را به طور موثر به حافظه بسپارید. در واقع، محاسبه مجدد اجزا را در صورت عدم تغییر ورودی‌ها متوقف می‌کند.

به عنوان مثال:

import React, { memo } from 'react';

const MyComponent = React.memo(({ name }) => {
  console.log('Rendering MyComponent');
  return

;
});

export default MyComponent;

با استفاده از memo، تنها زمانی که ورودی name تغییر کند، MyComponent مجددا رندر می‌شود. در غیر این صورت، به سادگی مقدار قبلی نمایش داده خواهد شد. این برای بهینه سازی اجزای پیچیده که اغلب با مقادیر ثابت رندر می‌شوند مفید است.

خلاصه نکات کلیدی:

• useMemo برای ذخیره مقادیر محاسبه شده استفاده می‌شود.
• memo برای به حافظه سپردن اجزا و جلوگیری از رندرهای غیر ضروری به کار می‌رود.
• با استفاده از این ابزارها، می‌توانید عملکرد برنامه React خود را بهبود بخشید.