Що відбувається при монтуванні компонента?

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

Що таке "монтування"

Монтування - це процес, під час якого React:

Створює екземпляр компонента (або викликає функцію-компонент),

Генерує Virtual DOM,

Порівнює його з реальним DOM (за потреби),

Вставляє елементи в браузерний DOM,

Викликає всі ефекти, пов'язані з монтуванням (useEffect, useLayoutEffect).

Етапи монтування покроково

1. React викликає компонент

Якщо це функціональний компонент, React просто викликає його як функцію:

javascript

function App() {
  console.log("Компонент викликано");
  return <div>Hello</div>;
}

Якщо це класовий компонент, React створює екземпляр класу (new MyComponent()), викликає constructor() (якщо є), а потім - render().

2. React будує Virtual DOM

Компонент повертає JSX -> React перетворює його на віртуальне дерево елементів (об'єкти в пам'яті).

javascript

return <div className="box">Hello</div>;

React створює внутрішнє представлення цього вузла:

javascript

{
  type: 'div',
  props: { className: 'box', children: 'Hello' }
}

3. React вставляє компонент у реальний DOM

На основі Virtual DOM React створює реальні DOM-елементи і додає їх у документ. Тобто ти вперше "бачиш" компонент на екрані.

4. React викликає ефекти монтування

Після того як DOM оновлено, React викликає всі хуки з порожніми залежностями [].

Приклад:

javascript

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

Цей код виконається один раз - одразу після першого рендеру і вставки в DOM.

Це аналог componentDidMount() у класових компонентах.

5. React викликає `useLayoutEffect` (якщо є)

Якщо ти використовуєш useLayoutEffect, він спрацює одразу після того, як DOM створено, але до "фарбування" (paint).

Це корисно для вимірювання елементів або синхронізації позицій.

javascript

useLayoutEffect(() => {
  const size = ref.current.getBoundingClientRect();
  console.log("Розміри:", size);
}, []);

Що зазвичай роблять при монтуванні

Задача	Інструмент
Завантажують дані з API	`useEffect(() => {...}, [])`
Налаштовують таймери / інтервали	`useEffect(() => { const id = setInterval(...); return () => clearInterval(id); }, [])`
Додають обробники подій (scroll, resize)	`window.addEventListener()` у `useEffect`
Вимірюють розміри елементів	`useLayoutEffect()`
Ініціалізують бібліотеки (наприклад, Chart.js, Leaflet, Swiper)	`useEffect(() => { initLib(); }, [])`

Приклад

javascript

import { useEffect, useState } from "react";

function UserList() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    console.log("Компонент змонтовано - завантажуємо дані...");
    fetch("/api/users")
      .then(res => res.json())
      .then(setUsers);
  }, []); // ← порожні залежності → спрацює 1 раз при монтуванні

  return (
    <ul>
      {users.map(u => <li key={u.id}>{u.name}</li>)}
    </ul>
  );
}

Тут:

Компонент рендериться вперше;
React вставляє <ul> в DOM;
useEffect викликається один раз -> виконує запит;
Після отримання даних компонент оновлюється.

Для класових компонентів (аналог)

javascript

class UserList extends React.Component {
  state = { users: [] };

  componentDidMount() {
    console.log("Компонент змонтовано");
    fetch("/api/users")
      .then(res => res.json())
      .then(users => this.setState({ users }));
  }

  render() {
    return <ul>{this.state.users.map(u => <li key={u.id}>{u.name}</li>)}</ul>;
  }
}

Тут використовується метод componentDidMount() - він викликається один раз після першого рендеру.

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

Особливість	Пояснення
`useEffect(() => {...}, [])` спрацьовує лише один раз	При монтуванні
`useLayoutEffect()` спрацьовує раніше, ніж `useEffect`	До відмальовування екрана
В React 18 Strict Mode ефекти монтування можуть викликатися двічі в dev-режимі	Це тест стабільності коду
Якщо компонент демонтується і знову монтується (наприклад, умовний рендер), ефект виконається заново	Кожне монтування = нова ініціалізація

Підсумок

Етап	Що робить React	Що робить розробник
1. Виклик компонента	Створює Virtual DOM	Ініціалізує стан (`useState`)
2. Рендер	Перетворює JSX у Virtual DOM	Повертає JSX
3. Вставка в DOM	Додає елементи на сторінку	Можна працювати з DOM (через `ref`)
4. Ефекти	Викликає `useEffect` / `useLayoutEffect`	Завантажує дані, додає слухачів
5. UI готовий	Компонент тепер "живе"	Очікує оновлення або демонтування

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

При монтуванні React створює і вставляє компонент у DOM, потім викликає ефекти (useEffect, useLayoutEffect) для ініціалізації даних, слухачів і логіки.

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

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

Premium

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