В чём разница в работе React.memo с компонентами, имеющими пропсы, и без них?

React.memo — это HOC, который оборачивает функциональный компонент и предотвращает его повторный рендер, если входные пропсы не изменились. Ключевой момент: сравнение делается поверхностно (shallow) и только по пропсам, без учёта внутреннего состояния или контекста.

Компонент без пропсов

Если компонент не принимает пропсов, React.memo фактически бесполезен: при каждом рендере родителя пропсы остаются пустым объектом, сравнение всегда возвращает true, и компонент не перерисовывается. Это может быть полезно, если компонент тяжёлый и не зависит от внешних данных, но чаще такое поведение достигается через useMemo или вынос компонента за пределы родителя.

const Static = React.memo(() => {
  console.log('render');
  return <div>Static</div>;
});
// Родитель ре-рендерится — Static не перерисуется

Компонент с пропсами

Когда пропсы есть, React.memo сравнивает каждое значение предыдущего и нового набора пропсов. Примитивы (числа, строки, boolean) сравниваются по значению, поэтому изменение значения вызовет ре-рендер. Объекты, массивы и функции сравниваются по ссылке: если родитель создаёт новый объект или функцию при каждом рендере, мемоизация не сработает.

const Item = React.memo(({ user, onClick }) => {
  console.log('render', user.name);
  return <div onClick={onClick}>{user.name}</div>;
});

// Плохо: новый объект и функция каждый рендер
<Item user={{ name: 'Ann' }} onClick={() => {}} />

// Хорошо: стабильные ссылки
const user = useMemo(() => ({ name: 'Ann' }), []);
const onClick = useCallback(() => {}, []);
<Item user={user} onClick={onClick} />

Кастомное сравнение

Второй аргумент React.memo — функция сравнения, которая позволяет контролировать, когда компонент должен обновляться. Это полезно для глубокого сравнения или игнорирования нестабильных пропсов.

const Item = React.memo(Component, (prev, next) => {
  return prev.user.id === next.user.id;
});

Итог: React.memo эффективен только при стабильных ссылках на пропсы. Для компонентов без пропсов он избыточен, а для компонентов с объектами и функциями требует useMemo и useCallback, иначе мемоизация не даст выигрыша.