Що робить React Profiler?

ReactJunior~3 хв читання

Що робить React Profiler

React Profiler - це частина React DevTools (вкладка в Chrome/Firefox DevTools), яка:

записує всі рендери компонентів;
вимірює час рендера кожного;
показує причину ререндера (state, props, context, parent);
допомагає знайти "вузькі місця" (bottlenecks) у продуктивності.

Де знайти Profiler

Встанови React Developer Tools (розширення для Chrome/Firefox);
Відкрий DevTools -> вкладка React Developer Tools;
Перейди на під-вкладку "Profiler".

Там є кнопка "Record", яка починає запис усіх рендерів.

Як працює Profiler (концептуально)

Під час профілювання React додає "маячки" (markers) навколо кожного рендера:

javascript

render(<Component />) → startTimer()
...рендер...
stopTimer()

Потім збирає статистику:

скільки мілісекунд зайняв рендер;
скільки разів компонент відрисувався;
які залежності викликали оновлення;
які компоненти "прокинулися" даремно.

Приклад використання Profiler (у DevTools)

1. Натискаєш "Record"

React починає відстежувати кожен рендер.

2. Виконуєш дії в застосунку

Наприклад, клікаєш кнопку, вводиш текст, переходиш по сторінках.

3. Натискаєш "Stop"

React показує дерево компонентів з підсвіткою за "вартістю" рендера:
- Червоний - рендерився довго (повільний компонент);
- Жовтий - середній;
- Зелений - швидкий.

Що показує Profiler

Метрика	Опис
Render duration	Скільки часу зайняв рендер компонента
Commits	Скільки разів React оновив DOM за період
Why did this render?	Причина ререндера (state, props, context, parent)
Flamegraph	Візуальна карта компонентів з часом рендера
Ranked chart	Список компонентів за тривалістю рендера
Interactions	Які дії користувача викликали оновлення

Приклад: як виглядає аналіз

Ти клікаєш кнопку "Додати товар", і Profiler показує:

javascript

<ProductsList> - Rendered (state changed)
<ProductItem> - Rendered (props changed)
<Header> - Skipped (no changes)

А також:

Render duration: 7.3ms
Commit 1: 15 components updated
Commit 2: 2 components updated

Видно, хто і скільки "з'їв" часу.

Приклад використання через код (для замірів вручну)

React також надає компонент <Profiler> для замірів у коді:

javascript

import { Profiler } from 'react';

function onRenderCallback(
  id, // рядок - ім'я профільованої області
  phase, // "mount" | "update"
  actualDuration, // скільки зайняв рендер
  baseDuration, // без мемоізації
  startTime, // коли почався рендер
  commitTime, // коли закінчився
) {
  console.log(`${id}: ${phase} зайняв ${actualDuration.toFixed(2)}ms`);
}

export default function App() {
  return (
    <Profiler id="ProductsList" onRender={onRenderCallback}>
      <ProductsList />
    </Profiler>
  );
}

Це корисно для програмного профілювання - можна логувати в консоль, метрики, Sentry, аналітику тощо.

Як Profiler допомагає оптимізувати

Знаходить "важкі" компоненти -> підсвітка червоним = багато часу на рендер.
Показує зайві ререндери -> можна побачити, що компонент ререндериться без змін props/state -> потрібен React.memo().
Виявляє "протікаючий" контекст -> зміна в Context викликає каскад ререндерів -> варто розділити провайдери.
Порівнює продуктивність до/після оптимізацій -> можна записати "до" і "після" та побачити ефект useMemo, useCallback, мемоізації.

Типові знахідки за допомогою Profiler

Проблема	Рішення
Компонент ререндериться при кожному вводі тексту	`React.memo()` + `useCallback()`
Контекст оновлює весь UI	Розділити контекст або використати селектори
Важке сортування/фільтрація на кожному рендері	`useMemo()`
Багато дрібних `setState()` поспіль	Об'єднати / використати batching
Багато ефектів на кожному оновленні	Уточнити залежності `useEffect`

Візуальні режими профайлера

Flamegraph

Показує ієрархію компонентів і час рендера.
Чим ширший блок - тим довший рендер.

Ranked

Показує список компонентів, відсортованих за часом рендера.

Commit selector

Можна переглядати кожен рендер-цикл ("commit") окремо.

Підсумок

Що робить	Як допомагає
Вимірює час рендера компонентів	Знаходить повільні ділянки
Показує причини ререндерів	Допомагає зрозуміти "хто винен"
Візуалізує навантаження	Flamegraph і ranked view
Використовується з DevTools або `<Profiler>`	Для аналізу в браузері і коді
Покращує продуктивність	Дає дані для оптимізації `React.memo`, `useMemo`, контексту

Простими словами:

React Profiler - це як "рентген" для твого UI: він показує, які компоненти рендеряться занадто часто і де втрачається продуктивність.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.