Когда компонент React перерисовывается и как избежать лишних рендеров?
- Зачем нужны React.memo, useMemo и useCallback?
Компонент перерисовывается, когда меняется его состояние, контекст, который он читает, или перерисовывается родитель (по умолчанию — все дети, даже с теми же props). React.memo пропускает рендер при неизменных props (сравнение по ссылке), useMemo запоминает значение, useCallback — функцию, чтобы ссылки не менялись.
- memo бесполезен, если в props каждый раз новый объект или стрелочная функция
- Сначала измерить в React DevTools Profiler, потом оптимизировать
- Часто помогает перенос состояния ниже или передача детей через children
А ещё React Compiler (React 19) расставляет мемоизацию автоматически
Подробно
Рендер — не изменение DOM. Перерисовка компонента — вызов функции и сравнение деревьев; DOM меняется, только если результат отличается. Лишние рендеры важны, когда компонентов много или они дорогие.
Почему memo не срабатывает:
<Row style={{ color: "red" }} onClick={() => select(id)} />Объект и функция создаются заново на каждом рендере родителя — props «изменились». Решение: вынести константы наружу, useMemo для объектов, useCallback для обработчиков.
Структурные приёмы, часто лучше мемоизации:
- опустить состояние в компонент, которому оно нужно, — родитель и соседи не перерисуются;
- передавать children — элементы, созданные выше, не пересоздаются при изменении состояния обёртки;
- разделить контекст — частые изменения в отдельном контексте.
Длинные списки — виртуализация (react-window): рендерить только видимые строки.
Что хотят услышать
- Причины перерисовки.
- memo, useMemo, useCallback и условие их пользы.
- Структурные способы и измерение.
Проверьте себя
Один верный вариант. Подумайте, потом откройте ответ.
Показать варианты и ответ
- ✗Компонент перерисовывается только при изменении своих props
- ✗useMemo запрещает компоненту перерисовываться
- ✓При смене состояния, контекста или рендере родителя; memo пропускает рендер при тех же props
- ✗При перерисовке родителя дети никогда не перерисовываются, если их props не изменились по ссылке
Связанные вопросы
Разбор собеседования с sotto
После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.