آشنایی با React Memo و کاربردهای آن

سلام! امروز می‌خوایم درباره یکی از قابلیت‌های پرکاربرد در React صحبت کنیم که به اسم React Memo شناخته می‌شه. اگر شما توسعه‌دهنده‌ای هستید که با React کار می‌کنید، ممکنه قبلاً با مفهومی به نام optimization یا بهینه‌سازی برخورد کرده باشید. خب، React Memo یکی از ابزارهای ما برای این کار هست. من می‌خوام اینجا در چند پاراگراف براتون شرح بدم که React Memo چی هست و چرا اهمیت داره.

وقتی داریم با React کار می‌کنیم، یکی از اصول مهمی که باید در ذهن داشته باشیم، روش رندر شدن کامپوننت‌هاست. ممکنه وقتی کامپوننت‌های مختلف رو بارها و بارها رندر کنیم، عملکرد برنامه تحت تأثیر قرار بگیره، به‌خصوص وقتی تعداد کامپوننت‌هامون بالا بره. اینجا جاییه که React Memo وارد بازی می‌شه و به‌کار میاد. با استفاده از این ویژگی می‌تونیم از انجام رندرهای غیرضروری برای بعضی کامپوننت‌ها جلوگیری کنیم.

جالبه بدونین که React Memo به‌سادگی یک hoc (Higher Order Component) هست که می‌تونه دور یک کامپوننت تابعی قرار بگیره. با این کار، React می‌تونه بررسی کنه که آیا پروپس هایی که به کامپوننت گذشته شده‌اند، تغییر کرده‌اند یا خیر، و فقط در صورت وجود تغییر، کامپوننت رو دوباره رندر می‌کنه.

برای درک بهتر، بیاین یه مثال بزنیم. فرض کنیم داریم روی پروژه‌ای کار می‌کنیم که در اون نیاز داریم لیستی از داده‌ها رو نمایش بدیم. اگر این داده‌ها تغییر نکرده باشن، می‌تونیم از React Memo استفاده کنیم تا لیست دوباره رندر نشه و عملکرد برنامه بهتر بشه.

کد مثال برای React Memo

import React from 'react';

const ListItem = React.memo(({ item }) => {
  console.log('Rendering:', item);
  return <li>{item}</li>;
});

const List = ({ items }) => {
  return (
    <ul>
      {items.map(item => (
        <ListItem key={item} item={item} />
      ))}
    </ul>
  );
};

export default List;

توضیح خط به خط کد