> Что такое React.memo и как он помогает оптимизировать рендеринг (React)

React.memo - это компонент высшего порядка (HOC) в React, который оптимизирует производительность за счёт мемоизации результата рендеринга функционального компонента. Он предотвращает повторный рендеринг компонента, если его пропсы не изменились (поверхностное сравнение).

Как работает:
React.memo оборачивает компонент и сравнивает новые пропсы с предыдущими с помощью Object.is (или кастомной функции сравнения, переданной вторым аргументом). Если пропсы остались теми же, React пропускает рендеринг и использует закешированный результат.

Пример:

JSX
const ExpensiveComponent = React.memo(({ data }) => {
  // Тяжелые вычисления или рендеринг
  return <div>{data}</div>;
});

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

• Компонент часто ререндерится из-за изменений в родителе, но его собственные пропсы редко меняются.

• Компонент содержит дорогие операции (рендеринг списков, графиков, анимаций).

Ограничения:

• Неэффективен при частом изменении пропсов (сравнение всё равно происходит).

• Не заменяет useMemo/useCallback для объектов или функций, передаваемых как пропсы (их нужно мемоизировать отдельно, иначе сравнение всегда будет false).

Таким образом, React.memo - это простой инструмент для снижения числа ненужных ререндеров, но его применение должно быть обоснованным, чтобы не усложнять код без реальной выгоды.