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

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

Допрацюйте відповідь до «Стадії життєвого циклу». Ваші зміни проходять модерацію перед публікацією.

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

Контент

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

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

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

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

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

## 3 головні стадії життєвого циклу компонента

Кожен React-компонент проходить через **три основні стадії**:

1. **Монтування (Mount)** - створення і вставка в DOM
2. **Оновлення (Update)** - повторний рендер за зміни даних
3. **Розмонтування (Unmount)** - видалення з DOM

---

## 1. Монтування (Mount)

Це момент, коли компонент вперше створюється і з'являється в DOM. React викликає компонент, створює DOM-елементи, «вставляє» їх на сторінку.

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

- викликає компонент уперше (рендер JSX);
- створює внутрішні структури (Virtual DOM);
- вставляє елементи в реальний DOM;
- викликає ефекти (useEffect / useLayoutEffect) із порожніми залежностями [].

### Можна робити:

- Запити до API (fetch)
- Підписки на події
- Налаштування таймерів
- Взаємодію з DOM

### Приклад:

```javascript
useEffect(() => {
  console.log("Component mounted");
}, []);
```

Викликається лише один раз, коли компонент з'являється вперше.

---

## 2. Оновлення (Update)

Відбувається щоразу, коли:

- змінюються props (вхідні дані компонента),
- змінюється state (внутрішній стан),
- батьківський компонент ререндериться.

React повторно викликає компонент, порівнює Virtual DOM і оновлює лише змінені частини.

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

- викликає компонент повторно;
- оновлює DOM, якщо змінився результат JSX;
- викликає ефекти, у яких змінилися залежності (useEffect(..., [deps])).

### Можна робити:

- Реагувати на зміни стану або пропсів
- Оновлювати дані при зміні параметрів
- Синхронізувати компонент із зовнішнім станом

### Приклад:

```javascript
useEffect(() => {
  console.log("Update: count changed");
}, [count]);
```

---

## 3. Розмонтування (Unmount)

Коли компонент видаляється з DOM (наприклад, сторінка змінилася, модалка закрилася).

React викликає cleanup-функції з ефектів, щоб очистити ресурси.

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

- видаляє компонент з DOM;
- викликає функції очищення (return () => {...} у useEffect).

### Можна робити:

- Скасовувати запити
- Очищати таймери
- Видаляти обробники подій
- Звільняти ресурси

### Приклад:

```javascript
useEffect(() => {
  console.log("Mounted");
  return () => {
    console.log("Unmounted");
  };
}, []);
```

---

## Візуально

```javascript
Mount → Update → Update → Unmount
```

Кожен компонент проходить цей цикл (іноді лише mount → unmount, якщо не оновлюється).

---

## Для порівняння: класовий і функціональний підхід

| Стадія | Класовий метод | Хук (функціональний компонент) |
|---|---|---|
| Монтування | componentDidMount() | useEffect(() => {...}, []) |
| Оновлення | componentDidUpdate() | useEffect(() => {...}, [deps]) |
| Розмонтування | componentWillUnmount() | useEffect(() => { return () => {...} }, []) |

---

## Додаткові «внутрішні» стадії (для поглибленого розуміння)

React 18 з архітектурою Fiber ввів більш детальний поділ циклу:

| Фаза | Що відбувається |
|---|---|
| Render phase | React викликає компоненти, створює Virtual DOM (але ще не змінює реальний DOM) |
| Commit phase | React порівнює старе й нове дерево та вносить зміни в DOM |
| Layout phase | Виконуються useLayoutEffect і синхронізація з DOM |
| Passive phase | Виконуються звичайні useEffect (асинхронно, після відмальовування) |

Ці фази потрібні для оптимізації (паралельний рендеринг, startTransition тощо), але на практиці ти зазвичай працюєш із 3 основними стадіями: Mount → Update → Unmount.

---

## Підсумок

| Стадія | Коли відбувається | Що робить React | Що робить розробник |
|---|---|---|---|
| Mount | За першого рендеру | Створює і вставляє компонент у DOM | Завантажує дані, підписується на події |
| Update | При зміні props або state | Повторно рендерить компонент | Реагує на зміни |
| Unmount | При видаленні компонента | Прибирає компонент із DOM | Очищає ресурси та підписки |

---

Головна ідея:

> Життєвий цикл компонента - це 3 ключові стадії: Монтування → Оновлення → Розмонтування, і хуки (useEffect, useLayoutEffect) дозволяють виконувати дії у потрібний момент.

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

Для рев’юера

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

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