Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Що робить React Profiler?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

## Що робить React Profiler

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

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

---

## Де знайти Profiler

1. Встанови **React Developer Tools** (розширення для Chrome/Firefox);
2. Відкрий DevTools -> вкладка **React Developer Tools**;
3. Перейди на під-вкладку **"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 допомагає оптимізувати

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

---

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

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

---

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

1. **Flamegraph**
  - Показує ієрархію компонентів і час рендера.
  - Чим ширший блок - тим довший рендер.
2. **Ranked**
  - Показує список компонентів, відсортованих за часом рендера.
3. **Commit selector**
  - Можна переглядати кожен рендер-цикл ("commit") окремо.

---

## Підсумок

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

---

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

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

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати676 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.