Стадії життєвого циклу

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

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

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

Монтування (Mount) - створення і вставка в DOM
Оновлення (Update) - повторний рендер за зміни даних
Розмонтування (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) дозволяють виконувати дії у потрібний момент.

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

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

Premium

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