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

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

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

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

Контент

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

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

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

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

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

## Основні етапи життєвого циклу

| Етап | Що відбувається |
|---|---|
| **Монтування (Mount)** | Компонент створюється і вперше вставляється в DOM |
| **Оновлення (Update)** | Компонент повторно рендериться через зміни `props` або `state` |
| **Розмонтування (Unmount)** | Компонент видаляється з DOM |
| **(опційно)** - Помилка (Error) | Виникає помилка в нащадках, React викликає error boundary |

---

## Як це виглядає на практиці

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

Відбувається при першій появі компонента в DOM.
React:

- викликає функцію компонента (або `constructor` у класі);
- рендерить JSX;
- вставляє результат у DOM;
- викликає всі ефекти з **порожніми залежностями** (`useEffect(..., [])`).

```javascript
useEffect(() => {
  console.log("Монтування");
}, []);
```

Тут можна:

- завантажувати дані (fetch);
- підписуватися на події;
- налаштовувати таймери, слухачі, зовнішні бібліотеки.

---

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

Компонент повторно рендериться, коли змінюються:

- його **props** (вхідні дані);
- його **state** (внутрішній стан).

```javascript
useEffect(() => {
  console.log("Оновлення");
}, [stateOrProp]);
```

Тут можна:

- реагувати на зміни (наприклад, перерахувати дані);
- синхронізувати DOM з новим станом;
- оновити підписки.

---

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

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

У цей момент викликається **cleanup-функція** з `useEffect`:

```javascript
useEffect(() => {
  console.log("Монтування");
  return () => {
    console.log("Розмонтування");
    // очищення: відписки, таймери, скасування запитів
  };
}, []);
```

Тут потрібно:

- очищати таймери (`clearInterval`);
- видаляти обробники подій (`removeEventListener`);
- скасовувати підписки або запити.

---

## Ілюстрація життєвого циклу (функціональний компонент)

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

React автоматично викликає компонент заново при кожній зміні даних,
а хуки (`useEffect`) дозволяють виконувати потрібні дії в потрібний момент.

---

## Приклад повного циклу

```javascript
function Example({ value }) {
  useEffect(() => {
    console.log("Монтування");

return () => {
      console.log("Розмонтування");
    };
  }, []);

useEffect(() => {
    console.log("Оновлення: value =", value);
  }, [value]);

return <div>{value}</div>;
}
```

**Лог у консолі:**

```javascript
Монтування
Оновлення: value = 1
Оновлення: value = 2
Розмонтування
```

---

## Для наочності - відповідність класових методів

| Класовий метод | Аналог у функціональних хуках |
|---|---|
| `componentDidMount` | `useEffect(() => {...}, [])` |
| `componentDidUpdate` | `useEffect(() => {...}, [deps])` |
| `componentWillUnmount` | `useEffect(() => {return () => {...}}, [])` |

> Тобто - все, що раніше робилося в цих методах,
> тепер робиться за допомогою `useEffect` і **cleanup** всередині нього.

---

## Важливо пам'ятати

| Поведінка | Опис |
|---|---|
| `useEffect` викликається **після** рендеру і відмальовки DOM | Він не блокує UI |
| `useLayoutEffect` викликається **до фарбування (paint)** | Для синхронізації з DOM |
| Кожен перерендер компонента = нове "оновлення" | React викликає його функцію знову |
| Ефект із залежностями `[ ]` спрацює **лише при монтуванні і розмонтуванні** | "один раз" |
| Ефект з `[deps]` спрацює при кожній зміні залежностей | "при оновленні" |

---

## Підсумок

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

---

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

> "Життєвий цикл" - це послідовність стадій (mount → update → unmount),
> і хуки (`useEffect`, `useLayoutEffect`) дозволяють керувати поведінкою компонента на кожному етапі.

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

Для рев’юера

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

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