Как оптимизировать перерендер компонентов?

Перерендеры оптимизируют в двух плоскостях: не допускать рендер (структура) и пропускать рендер (мемоизация). Начинать всегда с первой.

Понять причину

React DevTools Profiler покажет, что рендерилось и почему: собственный state, рендер родителя, контекст, подписка на стор.

Структурные приёмы

Спуск состояния. Частый state — в маленький компонент; страница перестаёт рендериться на каждый символ.

children как проп. Обёртка со своим состоянием не перерисовывает переданных детей (их элементы стабильны).

Разделение контекстов + мемоизация value: любой изменённый Provider будит всех потребителей, поэтому редкие и частые данные — в разные контексты.

Узкие селекторы стора: useSelector((s) => s.cart.count) вместо возврата объектов; иначе новая ссылка при каждом dispatch.

Мемоизация

• React.memo на дорогих детях — пропуск при равных props.
• useCallback/useMemo у родителя — стабильные ссылки, без которых memo не сработает.
• Помнить: memo не защищает от собственного state, контекста и стора; children ломают сравнение.

Уменьшение объёма и приоритеты

Виртуализация списков (рендерить видимое), useTransition/useDeferredValue (тяжёлое обновление не блокирует ввод), дебаунс.

Чего избегать

Мутаций state (изменения невидимы, memo «врёт»), новых key каждый рендер, компонентов, объявленных внутри рендера, тотальной мемоизации «на всякий случай».

Коротко для собеседования

Сначала профайлер и причина рендера. Затем структура: состояние вниз, children-как-проп, раздельные мемоизированные контексты, узкие селекторы. Потом точечно React.memo + useCallback/useMemo (цепочка ломается одним нестабильным пропом). Для больших списков — виртуализация, для отзывчивости — useTransition.