Що робить componentWillUnmount()?

ReactJunior~1 хв читання

Визначення

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

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

Компонент перебуває в DOM.
React вирішує видалити його (наприклад, через зміну state, props або навігацію).
Перед тим як видалити елемент з DOM, React викликає componentWillUnmount().
Після цього 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 і звільняє пам'ять.

Важливо

Ніколи не викликається вручну. React викликає його сам під час видалення компонента.
Не можна викликати setState() всередині componentWillUnmount(), компонент уже йде, оновлювати нічого.
Цей метод - найкраще місце для очищення будь-яких побічних ефектів:

очищення таймерів (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 }, [])`

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.