Что такое React.memo? Можно ли обернуть всё приложение в memo? Почему плохо использовать мемоизацию повсеместно?

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

Можно технически обернуть всё приложение в React.memo, но это нецелесообразно. Обычно мемоизация полезна для компонентов, которые часто получают одинаковые пропсы и дорого рендерятся.

Почему плохо использовать мемоизацию повсеместно:

• Накладные расходы на сравнение пропсов могут превысить выгоду от пропуска рендера.
• Мемоизация усложняет логику и отладку.
• Не все компоненты выигрывают от мемоизации, особенно простые и быстрые.

Пример использования React.memo:

const MyComponent = React.memo(function MyComponent(props) {
  // компонент будет перерендериваться только при изменении props
  return <div>{props.value}</div>;
});