Зачем нужен memo в React и как он оптимизирует рендеринг?

Зачем нужен memo в React и как он оптимизирует рендеринг?

• React.memo — HOC, предназначенный для оптимизации рендеринга
• сохраняет результат рендеринга компонента
• по умолчанию выполняет поверхностное сравнение пропсов
• исключает лишние рендеры, когда пропсы остаются прежними
• повышает производительность функциональных компонентов
• особенно эффективен для часто обновляющегося UI с неизменными пропсами
• уменьшает нагрузку на виртуальный DOM и браузерный рендеринг

Развёрнутый ответ

Краткий ответ

memo в React представляет собой HOC (Higher Order Component), применяемый для повышения производительности функциональных компонентов. Если props остаются без изменений, он не допускает их повторного рендеринга, благодаря чему сокращается число ненужных перерисовок и уменьшается нагрузка на UI.

Основные моменты

• Принцип работы: React.memo поверхностно (shallow comparison) сопоставляет предыдущие и текущие props. При их идентичности React пропускает повторный рендер компонента. Это заметно улучшает производительность, когда родительский компонент часто обновляется.
• Пользовательское сравнение: при необходимости можно передать собственную функцию для сравнения props. Такой подход подходит для более глубоких проверок и особых условий, например при работе со сложными объектами.
• Ограничения: memo не предотвращает рендеринг, вызванный изменениями внутреннего состояния или контекста, поскольку учитывает только props. Кроме того, применение этого механизма к очень маленьким компонентам может оказаться неэффективным: затраты на сравнение способны превысить пользу.

Практическое применение

В React 18+ memo часто используют для оптимизации списков, компонентов с ресурсоёмкими вычислениями и UI-компонентов, которым передаются неизменяемые props. В крупных приложениях с frequent re-renders применение memo помогает сделать анимации плавнее и сократить задержки примерно до 50 мс, улучшая user experience без глобального мемоизирования state.