Мемоизация везде: за и против
Вопрос
Коллега предлагает обернуть все компоненты в memo, а все функции в useCallback. Что ответишь?
Попробуйте сами
Ответьте вслух за 2 минуты, как на собесе. Потом сверьтесь с тезисами: что прозвучало, а что нет.
Показать ответ и разбор
Коротко
Что должно прозвучать в ответе
Мемоизация не бесплатна: сравнение зависимостей, хранение кеша, шум в коде
Бесполезна без стабильных props: одна инлайн-функция ломает memo
useCallback без memo у получателя ничего не даёт
Неполные зависимости дают устаревшие значения, это новый класс багов
Сначала профилировать и чинить структуру
С React Compiler ручная мемоизация в основном не нужна, компилятор делает её точнее
Что могут спросить следом
- Когда мемоизация действительно нужна?
- Как проверить, что оптимизация сработала?
- Что делать с кодом, который компилятор пропускает?
Разбор
Я бы не делал это по умолчанию. Мемоизация тоже стоит денег: на каждом рендере React сравнивает зависимости и хранит кеш, а код обрастает обёртками. При этом она легко ломается: стоит передать в memo-компонент инлайн-объект или JSX в children, и всё сравнение работает вхолостую. useCallback без memo у получателя вообще ничего не экономит. А ошибка в зависимостях даёт устаревшее значение, и это уже баг, а не тормоза. Мой подход: сначала профилировать, найти реальные горячие места и поправить структуру, а мемоизацию добавлять точечно, где замер показал выигрыш. Если же у нас есть React Compiler, он сам мемоизирует на уровне отдельных значений и делает это аккуратнее человека, и тогда ручные обёртки остаются только как исключение.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.
Термины по теме
Ещё по теме «memo, useMemo, useCallback»
- Перерендерится ли children
- React Compiler
- React.memo
- useCallback
- useMemo
- Таблица на 10 000 строк
- memo и children
- memo и стрелочная функция в props