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

`React.memo` — это функция высшего порядка, которая мемоизирует функциональный компонент: он перерисовывается только при изменении props (по поверхностному сравнению).

Что делает

Оборачивает компонент, и React пропускает его повторный рендер, если props не изменились:

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

Без memo компонент перерисовывается при каждом рендере родителя; с memo — только когда его props реально поменялись.

Поверхностное сравнение

Props сравниваются поверхностно (по ссылке/значению верхнего уровня). Поэтому новые ссылки на каждый рендер ломают оптимизацию:

// Плохо: новый объект/функция каждый рендер → memo бесполезен
<UserCard user={{ name }} onClick={() => {}} />

Решение — стабилизировать props через useMemo/useCallback.

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

React.memo(Component, (prev, next) => prev.id === next.id);

Когда применять

• Компонент часто перерисовывается с теми же props.
• Рендер компонента дорогой.

Не оборачивать всё подряд — сравнение тоже стоит ресурсов.

memo против useMemo/PureComponent

• React.memo — мемоизирует компонент (по props).
• useMemo — мемоизирует значение внутри компонента.
• PureComponent — аналог memo для классов.

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

React.memo мемоизирует функциональный компонент: пропускает ре-рендер, если props не изменились (поверхностное сравнение). Требует стабильных props (useMemo/useCallback), иначе бесполезен. Применяют к дорогим часто-рендерящимся компонентам. Аналог PureComponent для классов.