Какие инструменты использовать для анализа производительности и отладки ререндеринга компонента?

Что проверяют

Умеете ли вы найти причину лишнего рендера измерением, а не расстановкой memo по всему коду. Интервьюеру важно, отличаете ли вы рендер компонента от реального обновления DOM и понимаете ли, когда ререндер вообще проблема. Следом обычно спрашивают, почему компонент рендерится при неизменных пропсах.

Как отвечать

Покажите порядок работы: сначала замер, потом причина, потом исправление.

• React DevTools, вкладка Profiler: запись взаимодействия, flame graph по коммитам, время рендера каждого компонента. Настройка «Record why each component rendered while profiling» показывает причину: пропсы, состояние, хук или родитель;
• подсветка обновлений: опция «Highlight updates when components render» или React Scan, чтобы видеть перерисовки глазами;
• компонент <Profiler>: колбэк onRender отдаёт время рендера программно. В обычной продакшен-сборке он отключён, нужна профилирующая сборка;
• Chrome DevTools, панель Performance: долгие задачи, скрипты, стили и layout, в свежих версиях React ещё и собственные дорожки компонентов;
• why-did-you-render: библиотека для разработки, пишет в консоль рендеры с одинаковыми пропсами.

Типичные причины: новый объект или функция в пропсах на каждый рендер, значение контекста, которое родитель пересоздаёт, состояние, поднятое слишком высоко. Исправления: перенос состояния ниже, разделение контекста, React.memo вместе с useMemo и useCallback. Упомяните React Compiler: он мемоизирует автоматически, и в проекте с ним ручная мемоизация нужна гораздо реже.

Где спотыкаются

Измеряют в dev-режиме и делают выводы о скорости. Там React заметно медленнее, а StrictMode намеренно рендерит компоненты дважды, и это не баг.

Передают в дочерний компонент функцию из useCallback, но сам компонент не оборачивают в React.memo. Тогда стабильная ссылка ничего не даёт, ребёнок рендерится вместе с родителем.

Путают ререндер с перерисовкой страницы. Рендер без изменений в DOM обычно дешёвый, оптимизировать его стоит, когда Profiler показал реальную цену.