Как пользоваться React DevTools Profiler для анализа ререндеров и что означает цветовая подсветка компонентов?

Запишите проблемное взаимодействие в Profiler, выберите commit и найдите дорогие компоненты по flame/ranked chart, затем изучите причины их обновления.

В классической flame chart жёлтый означает более дорогой рендер, синий — менее дорогой, серый — отсутствие рендера в выбранном commit; детали зависят от версии инструмента. Сравнивайте длительность и частоту, а не только цвет. Подсветка обновлений на самой странице — отдельный режим, не доказательство медленного компонента.

Источник: legacy.reactjs.org.