Ответ вслух Senior memo, useMemo, useCallback обновлено

Мемоизация везде: за и против

Вопрос

Коллега предлагает обернуть все компоненты в memo, а все функции в useCallback. Что ответишь?

Попробуйте сами

Ответьте вслух за 2 минуты, как на собесе. Потом сверьтесь с тезисами: что прозвучало, а что нет.

Показать ответ и разбор

Коротко

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

Что должно прозвучать в ответе

  • Мемоизация не бесплатна: сравнение зависимостей, хранение кеша, шум в коде

  • Бесполезна без стабильных props: одна инлайн-функция ломает memo

  • useCallback без memo у получателя ничего не даёт

  • Неполные зависимости дают устаревшие значения, это новый класс багов

  • Сначала профилировать и чинить структуру

  • С React Compiler ручная мемоизация в основном не нужна, компилятор делает её точнее

Что могут спросить следом

  • Когда мемоизация действительно нужна?
  • Как проверить, что оптимизация сработала?
  • Что делать с кодом, который компилятор пропускает?

Разбор

Я бы не делал это по умолчанию. Мемоизация тоже стоит денег: на каждом рендере React сравнивает зависимости и хранит кеш, а код обрастает обёртками. При этом она легко ломается: стоит передать в memo-компонент инлайн-объект или JSX в children, и всё сравнение работает вхолостую. useCallback без memo у получателя вообще ничего не экономит. А ошибка в зависимостях даёт устаревшее значение, и это уже баг, а не тормоза. Мой подход: сначала профилировать, найти реальные горячие места и поправить структуру, а мемоизацию добавлять точечно, где замер показал выигрыш. Если же у нас есть React Compiler, он сам мемоизирует на уровне отдельных значений и делает это аккуратнее человека, и тогда ручные обёртки остаются только как исключение.

Ответьте сами, а не прочитайте

В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.

Термины по теме