По каким критериям React.memo решает, перерендеривать компонент или нет?

React.memo — это инструмент оптимизации, который позволяет пропускать лишние рендеры компонентов.

Определение

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

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

По умолчанию React:

• сравнивает пропсы по ссылке

• использует Object.is

• не делает глубокого сравнения

Пример:

const MyComponent = React.memo(function MyComponent({ value }) {
  return <div>{value}</div>;
});

Если value — примитив и не изменился, рендер будет пропущен.

Что считается изменением

Ререндер произойдёт, если:

• изменился примитив (number, string, boolean)

• передан новый объект

• передана новая функция

• изменился key

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

Можно передать собственный компаратор:

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

Но:

• это усложняет код

• может быть дороже, чем сам рендер

Ограничения

React.memo:

• не предотвращает рендер родителя

• не гарантирует ускорение

• полезен только при дорогом рендере

Вывод

React.memo решает о перерендере на основе поверхностного сравнения пропсов. Эффективность зависит от стабильности передаваемых данных.