1. Отслеживание рендеров при помощи опции  "Highlight updates"

Зайдите в react devtools, нажмите значок шестеренки и включите опцию “Highlight updates**”.**

Эта опция позволяет подсвечивать компоненты при ререндере. Чем чаще ререндерится компонент, тем ближе к красному будет его цвет. Вот, например, компонент, который ререндерится приблизительно каждую секунду:

devtools1.mov

А вот так выглядит компонент, который планирует свой ререндер каждые 10мс:

devtools2.mov

2. Использование профайлера

Заходим в Profiler, который предоставляет нам react devtools, и жмем на запись. Получившаяся картина позволит нам проанализировать ререндеры нашего приложения.

На этом графике мы видим 5 довольно широких столбцов. Каждый столбец соответствует одному рендеру.

Обновление DOM в React состоит из двух фаз:

1. Render фаза - во время нее вычисляются необходимые изменения
2. Commit фаза - изменения вносятся в реальный DOM.