Що таке "життєвий цикл" компонента в React?

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

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

Етап	Що відбувається
Монтування (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) дозволяють керувати поведінкою компонента на кожному етапі.

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

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

Premium

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