Как работает React.memo?

По умолчанию React перерендеривает компонент каждый раз, когда перерендеривается его родитель.

Определение

React.memo — это HOC, который запоминает результат рендера компонента и повторно использует его, если входные props не изменились.

Как работает сравнение

React:

• сравнивает предыдущие и новые props

• использует поверхностное сравнение

• проверяет ссылки, а не содержимое объектов

const User = React.memo(function User({ name }) {
  return <span>{name}</span>;
});

Пользовательская функция сравнения

Можно передать свою функцию сравнения:

React.memo(Component, (prevProps, nextProps) => {
  return prevProps.id === nextProps.id;
});

Когда React.memo не помогает

Оптимизация не сработает, если:

• в props передаются новые объекты или функции

• родитель создаёт значения на каждом рендере

Когда использовать

React.memo полезен, если:

• компонент часто перерендеривается

• рендер дорогой

• props редко меняются

Краткий вывод

React.memo снижает количество перерендеров за счёт мемоизации, но эффективен только при стабильных props.