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

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

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

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

Контент

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

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

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

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

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

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

> **Монтування** - це процес, під час якого React:
>
> 1. Створює екземпляр компонента (або викликає функцію-компонент),
> 2. Генерує Virtual DOM,
> 3. Порівнює його з реальним DOM (за потреби),
> 4. Вставляє елементи в браузерний DOM,
> 5. Викликає всі ефекти, пов'язані з монтуванням (`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`) для ініціалізації даних, слухачів і логіки.

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

Для рев’юера

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

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