memo

Оновлення запам'ятованого компонента за допомогою стану

Навіть коли компонент запам'ятовується, він все одно буде повторно зображуватися при зміні його стану. Запам'ятовування стосується лише пропсів, які передаються компоненту від його батька.

Якщо ви встановите змінну стану у поточне значення, React пропустить повторний рендеринг вашого компонента навіть без memo. Ви можете побачити, що функція вашого компонента буде викликана додатковий раз, але результат буде відкинуто.

Оновлення запам'ятованого компонента за допомогою контексту

Навіть якщо компонент запам'ятовується, його все одно буде повторно відрендерено при зміні контексту, який він використовує. Запам'ятовування стосується лише пропсів, які передаються компоненту від його батька.

Щоб ваш компонент повторно рендерився лише тоді, коли змінюється частина деякого контексту, розділіть ваш компонент на дві частини. Прочитайте те, що вам потрібно, з контексту у зовнішньому компоненті і передайте його дочірньому компоненту як проп.

Мінімізація змін пропсів

Коли ви використовуєте memo, ваш компонент повторно рендерить щоразу, коли будь-який проп не близько дорівнює тому, що було раніше. Це означає, що React порівнює кожен проп у вашому компоненті з його попереднім значенням, використовуючи порівняння Object.is. Зверніть увагу, що Object.is(3, 3) є true, але Object.is({}, {}) є false.

Щоб отримати максимальну віддачу від memo, мінімізуйте час зміни пропсів. Наприклад, якщо реквізит є об'єктом, не дозволяйте батьківському компоненту щоразу створювати цей об'єкт наново, використовуючи useMemo:

function Page() {
  const [name, setName] = useState('Taylor');
  const [age, setAge] = useState(42);

  const person = useMemo(
    () => ({ name, age }),
    [name, age]
  );

  return <Profile person={person} />;
}

const Profile = memo(function Profile({ person }) {
  // ...
});

Кращий спосіб мінімізувати зміни пропсів - переконатися, що компонент приймає мінімально необхідну інформацію у своїх пропсах. Наприклад, він може приймати окремі значення замість цілого об'єкта:

function Page() {
  const [name, setName] = useState('Taylor');
  const [age, setAge] = useState(42);
  return <Profile name={name} age={age} />;
}

const Profile = memo(function Profile({ name, age }) {
  // ...
});

Іноді навіть окремі значення можна спроектувати на ті, що змінюються рідше. Наприклад, тут компонент приймає булеве значення, яке вказує на наявність значення, а не саме значення:

function GroupsLanding({ person }) {
  const hasGroups = person.groups !== null;
  return <CallToAction hasGroups={hasGroups} />;
}

const CallToAction = memo(function CallToAction({ hasGroups }) {
  // ...
});

Коли вам потрібно передати функцію запам'ятовуваному компоненту, або оголосіть її поза компонентом, щоб вона ніколи не змінювалася, або useCallback кешуйте її визначення між повторними рендерингами.

Вказівка користувацької функції порівняння

У рідкісних випадках може бути неможливо мінімізувати зміни пропсів запам'ятованого компонента. У такому випадку ви можете створити власну функцію порівняння, яку React буде використовувати для порівняння старого і нового пропсів замість поверхневої рівності. Ця функція передається як другий аргумент до memo. Вона має повертати true лише у випадку, якщо нові пропси призведуть до такого ж результату, як і старі пропси; інакше вона має повертати false.

const Chart = memo(function Chart({ dataPoints }) {
  // ...
}, arePropsEqual);

function arePropsEqual(oldProps, newProps) {
  return (
    oldProps.dataPoints.length === newProps.dataPoints.length &&
    oldProps.dataPoints.every((oldPoint, index) => {
      const newPoint = newProps.dataPoints[index];
      return oldPoint.x === newPoint.x && oldPoint.y === newPoint.y;
    })
  );
}

Якщо ви це зробите, скористайтеся панеллю Performance в інструментах розробника вашого браузера, щоб переконатися, що ваша функція порівняння насправді працює швидше, ніж перерендеринг компонента. Ви можете бути здивовані.

Під час вимірювання продуктивності переконайтеся, що React працює у режимі виробництва.

Налагодження

Мій компонент повторно рендерить, коли проп є об'єктом, масивом або функцією

React порівнює старі та нові пропси за неглибокою рівністю: тобто перевіряє, чи кожен новий проп є рівним за рефом до старого. Якщо ви створюєте новий об'єкт або масив кожного разу, коли батько рендериться повторно, навіть якщо окремі елементи будуть однаковими, React все одно вважатиме їх зміненими. Аналогічно, якщо ви створюєте нову функцію під час рендерингу батьківського компонента, React вважатиме його зміненим, навіть якщо функція має те саме визначення. Щоб уникнути цього, спростіть пропси або запам'ятайте пропси в батьківському компоненті.