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

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

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

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

Контент

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

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

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

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

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

## Що таке React DevTools

**React DevTools** - це **розширення для браузера** (Chrome, Firefox, Edge тощо),
яке дозволяє **переглядати, досліджувати і налагоджувати дерево React-компонентів** прямо в інструментах розробника (DevTools).

По суті - це "інтерактивне вікно всередину Virtual DOM".

---

## Навіщо він потрібен

React DevTools допомагає:

1. **Вивчати структуру компонентів**
  - бачити дерево компонентів React;
  - дивитися, які компоненти вкладені один в одного;
  - розуміти, як влаштований UI.
2. **Відстежувати** `props` **і** `state`
  - можна клікнути на будь-якому компоненті й побачити його поточний стан;
  - можна змінювати `state` і `props` прямо в DevTools - React негайно оновить UI;
  - зручно для тестування і пошуку помилок.
3. **Профілювати продуктивність**
  - вкладка **Profiler** показує, які компоненти перемальовуються і чому;
  - можна бачити "час рендеру" і виявляти "важкі" ділянки;
  - допомагає оптимізувати `React.memo`, `useMemo`, `useCallback`.
4. **Відстежувати re-render-цикли**
  - видно, які компоненти оновлюються при зміні стану;
  - можна зрозуміти, **де відбуваються зайві рендери**.
5. **Працювати з контекстом (**`Context`**)**
  - показує, які компоненти підписані на контекст;
  - видно, коли контекст змінюється і хто його отримує.
6. **Підтримує різні версії React**
  - працює як з React DOM, так і з React Native (через standalone-версію);
  - вміє показувати хуки (`useState`, `useEffect`, `useRef`, `useContext` тощо).

---

## Як це виглядає

Після встановлення:

- у DevTools з'являється нова вкладка **"Components"**
- дерево всіх React-компонентів;
- і вкладка **"Profiler"**
- інструмент для вимірювання продуктивності.

---

### Приклад вкладки Components

Можна:

- обрати будь-який компонент;
- побачити його:

```javascript
  props: { name: "Alex", age: 25 }
  state: { isActive: true }
  hooks: [useState, useEffect, useRef...]
  ```
- змінити значення прямо з інтерфейсу -> UI оновиться миттєво.

---

### Приклад вкладки Profiler

Дозволяє "записати" один рендер:

- натискаєш **Start profiling**;
- виконуєш дію в UI (наприклад, клік);
- натискаєш **Stop profiling**;
- бачиш візуально, які компоненти перемалювалися, скільки часу зайняло оновлення, і які оновлення були "дорогими".

---

## Як встановити

### Спосіб 1: з Chrome Web Store

React Developer Tools - Chrome Web Store

Після встановлення -> відкрий DevTools -> з'явиться вкладка **Components**.

### Спосіб 2: npm-версія (для React Native або Electron)

```javascript
npm install -g react-devtools
react-devtools
```

Відкриється окреме вікно, яке підключається до React-застосунку.

---

## Чому це важливо

Без DevTools:

- неможливо зручно бачити, які дані реально передаються в компонент;
- важко знайти причину зайвого рендеру;
- складно розуміти, як працюють Context і Hooks.

З DevTools:
легко діагностувати помилки
просто оптимізувати рендер
швидше розуміти чужий код

---

## Підсумок

| Можливість | Що робить |
| --- | --- |
| **Перегляд дерева компонентів** | Бачиш структуру React-застосунку |
| **Налагодження стану** | Дивишся і змінюєш `state`, `props`, `hooks` |
| **Profiler** | Вимірюєш продуктивність і знаходиш "важкі" рендери |
| **Підтримка контексту і хуків** | Бачиш значення й оновлення контексту |
| **Сумісність** | Працює з React DOM і React Native |

---

**Підсумкове визначення:**

> **React DevTools** - це офіційний інструмент розробника React,
> який дозволяє досліджувати, налагоджувати і оптимізувати React-компоненти та їхню продуктивність.

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

Для рев’юера

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

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