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