Какие причины повторного рендеринга компонента встречаются чаще всего и как их диагностировать?

Лишние перерендеры — самая частая причина тормозов React-приложений. Причины типовые, и у каждой есть свой способ диагностики и лечения.

Частые причины

• Рендер родителя — по умолчанию перерендеривается всё поддерево. Часто «дорогой» компонент страдает из-за строчки state в корне приложения.
• Нестабильные props — инлайн-объекты, массивы и функции (style={{...}}, onClick={() => ...}) создаются заново каждый рендер и ломают React.memo у детей.
• Контекст-«помойка» — один Provider с большим объектом value: любое изменение любого поля перерендеривает всех потребителей. Плюс сам value={{ ... }} как инлайн-объект — новая ссылка каждый рендер родителя.
• Широкие селекторы стора — useSelector((s) => s) или возврат нового объекта из селектора: подписка срабатывает на каждое изменение стора.
• Состояние не на своём уровне — часто меняющееся значение (поле ввода, позиция скролла) хранится слишком высоко в дереве.
• Новый key каждый рендер — key={Math.random()} пересоздаёт компонент целиком.

Как диагностировать

• React DevTools Profiler: записать взаимодействие, посмотреть флейм-граф; опция «Record why each component rendered» показывает причину (props / state / context / parent).
• Highlight updates в DevTools — подсветка перерендеривающихся областей в реальном времени.
• Точечно: console.log в теле компонента или хук-«детектор» изменившихся props (сравнить prev/next в useRef).

Лечение по причине

• Родительский каскад → React.memo на дорогих детях, спуск состояния вниз, children-как-проп.
• Нестабильные ссылки → useCallback/useMemo.
• Контекст → разделить на несколько контекстов, мемоизировать value.
• Селекторы → выбирать минимум данных, использовать shallowEqual/мемоизированные селекторы.

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

Топ причин: каскад от родителя, инлайн-объекты и функции в props, «толстый» контекст, широкие селекторы стора, состояние слишком высоко в дереве. Диагностика — React DevTools Profiler с «why did this render». Лечение точечное: правильная структура состояния, мемоизация, разделение контекстов.