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

React DevTools Profiler — это встроенная вкладка в расширении React DevTools, которая позволяет записывать и анализировать производительность рендера React-приложения. Она показывает, какие компоненты рендерились, сколько времени занял каждый рендер и почему компонент обновился. Это ключевой инструмент для оптимизации UI, особенно когда приложение начинает тормозить при взаимодействии пользователя.

Как пользоваться Profiler

1. Откройте DevTools, перейдите на вкладку Profiler.
2. Нажмите кнопку записи (кружок) и выполните действие в приложении (клик, ввод, навигация).
3. Остановите запись — появится граф рендеров (flame chart) и ранжированный список компонентов.
4. Изучите, какие компоненты рендерились и сколько времени заняли.
5. Включите опцию Highlight updates when components render, чтобы видеть ререндеры в реальном времени.

Цветовая подсветка

В flame chart цвет компонента отражает относительное время его рендера в рамках текущей записи:

• Серый — компонент не рендерился в этой сессии.
• Зелёный — быстрый рендер (наименьшее время).
• Жёлтый — среднее время рендера.
• Красный — самый долгий рендер среди всех компонентов записи.

Важно: цвет относительный, а не абсолютный. Если всё приложение рендерится за 1 мс, самый медленный компонент всё равно будет красным. Поэтому смотрите и на абсолютные значения времени.

Пример: поиск лишнего ререндера

function Parent() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <button onClick={() => setCount(count + 1)}>+</button>
      <Child /> {/* рендерится при каждом клике, хотя props не меняются */}
    </div>
  );
}

const Child = React.memo(function Child() {
  return <p>Static content</p>;
});

В Profiler при клике вы увидите, что Child рендерится вместе с Parent. Обернув Child в React.memo, вы увидите, что он больше не участвует в рендере — цвет станет серым.

Полезные настройки

• Record why each component rendered — показывает причину ререндера (props, state, hooks, parent).
• Ranked — сортировка компонентов по времени рендера.
• Commit — отдельный цикл обновления DOM.

Итог: Profiler стоит применять при оптимизации производительности React-приложения, чтобы находить дорогие и лишние ререндеры и точечно исправлять их через memo, useMemo, useCallback или правильное разделение состояния.