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

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

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

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

Контент

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

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

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

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

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

## Визначення

> `componentWillUnmount()` - це метод життєвого циклу,
> який викликається **один раз, безпосередньо перед розмонтуванням компонента**.

---

## Коли викликається

1. Компонент перебуває в DOM.
2. React вирішує видалити його (наприклад, через зміну `state`, `props` або навігацію).
3. Перед тим як видалити елемент з DOM, React викликає `componentWillUnmount()`.
4. Після цього React **видаляє вузол з DOM і забуває компонент**.

---

## Сигнатура

```javascript
componentWillUnmount() {
  // Очищення: відписки, таймери, слухачі, WebSocket, ефекти тощо
}
```

---

## Приклад

```javascript
class Timer extends React.Component {
  componentDidMount() {
    this.intervalId = setInterval(() => {
      console.log('tick');
    }, 1000);
  }

componentWillUnmount() {
    clearInterval(this.intervalId); // очищаємо таймер
    console.log('Компонент видалено');
  }

render() {
    return <div>Таймер активний</div>;
  }
}
```

**Що відбувається:**

- Коли компонент монтується → створюється інтервал.
- Коли він видаляється → `componentWillUnmount` очищає інтервал.
- Після цього React видаляє компонент з DOM і звільняє пам'ять.

---

## Важливо

1. **Ніколи не викликається вручну.**
React викликає його сам під час видалення компонента.
2. **Не можна викликати** `setState()` **всередині** `componentWillUnmount()`,
компонент уже йде, оновлювати нічого.
3. Цей метод - **найкраще місце для очищення будь-яких побічних ефектів**:
  - очищення таймерів (`clearInterval`, `clearTimeout`)
  - відписка від подій (`removeEventListener`)
  - закриття з'єднань (WebSocket, SSE)
  - скасування мережевих запитів (AbortController)
  - очищення зовнішніх бібліотек (наприклад, `chart.destroy()`)

---

## Аналог у функціональних компонентах

У функціональних компонентах **еквівалент - функція очищення в** `useEffect()`:

```javascript
function Timer() {
  useEffect(() => {
    const id = setInterval(() => console.log('tick'), 1000);
    return () => {
      clearInterval(id); // аналог componentWillUnmount
      console.log('Компонент видалено');
    };
  }, []); // [] → ефект спрацює лише при монтуванні та розмонтуванні

return <div>Таймер активний</div>;
}
```

> React викликає cleanup-функцію при **розмонтуванні** або перед наступним запуском ефекту.

---

## Життєвий цикл у зв'язці

| Етап | Метод | Коли викликається |
|---|---|---|
| Монтування | `componentDidMount()` | Після додавання в DOM |
| Оновлення | `componentDidUpdate()` | Після оновлення DOM |
| Розмонтування | `componentWillUnmount()` | Перед видаленням з DOM |

---

## Приклад у реальному сценарії

```javascript
class Chat extends React.Component {
  componentDidMount() {
    this.socket = new WebSocket('wss://chat.example');
    this.socket.onmessage = (msg) => console.log(msg);
  }

componentWillUnmount() {
    this.socket.close(); // закриваємо з'єднання
  }

render() {
    return <div>Підключено до чату</div>;
  }
}
```

Якщо компонент зникає зі сторінки (наприклад, користувач вийшов з кімнати),
`componentWillUnmount()` закриє WebSocket, щоб не було витоків пам'яті та помилок.

---

## Підсумок

> `componentWillUnmount()` - викликається **один раз, перед видаленням компонента з DOM**,
> і використовується для **очищення ресурсів**, підписок і таймерів.

---

| Класовий компонент | Функціональний аналог |
|---|---|
| `componentWillUnmount()` | Cleanup-функція з `useEffect(() => { ... return cleanup }, [])` |

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

Для рев’юера

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

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