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

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

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

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

Контент

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

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

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

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

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

## 1. `useEffect()` об'єднує кілька стадій життєвого циклу

У класових компонентах у нас є різні методи для різних стадій:

| Стадія | Метод | Коли викликається |
|---|---|---|
| Монтування | `componentDidMount()` | Після першого рендера |
| Оновлення | `componentDidUpdate()` | Після кожного оновлення |
| Розмонтування | `componentWillUnmount()` | Перед видаленням з DOM |

А **у функціональному компоненті** один `useEffect()` здатний виконувати всі ці ролі,
залежно від того, **як ти вкажеш залежності** (`deps`).

---

## 2. Як `useEffect` поводиться в різних режимах

### Монтування (аналог `componentDidMount`)

```javascript
useEffect(() => {
  console.log('Монтування компонента');
}, []); // порожній масив → викликається лише один раз
```

Виконається **один раз після першого рендера** (і після додавання в DOM).
Використовується для:

- завантаження даних,
- підписок,
- ініціалізації.

---

### Оновлення (аналог `componentDidUpdate`)

```javascript
useEffect(() => {
  console.log('Компонент оновився');
});
```

Без масиву залежностей -> викликається **після кожного рендера**.
З масивом залежностей -> лише якщо змінилося конкретне значення:

```javascript
useEffect(() => {
  console.log('count змінився');
}, [count]);
```

---

### Розмонтування (аналог `componentWillUnmount`)

```javascript
useEffect(() => {
  console.log('Монтування');

return () => {
    console.log('Розмонтування'); // cleanup
  };
}, []);
```

Повернення функції з `useEffect` - це **cleanup**,
який React викличе **перед розмонтуванням компонента**.
Використовується для:

- відписки від подій,
- очищення таймерів,
- закриття з'єднань.

---

## 3. Один `useEffect` може виконувати **всі три ролі одночасно**

```javascript
useEffect(() => {
  console.log('Монтування або оновлення');

const id = setInterval(() => console.log('tick'), 1000);

return () => {
    console.log('Очищення перед розмонтуванням або оновленням');
    clearInterval(id);
  };
}, [count]);
```

Тут один `useEffect`:

- при першому рендері -> діє як `componentDidMount`;
- при зміні `count` -> як `componentDidUpdate`;
- при видаленні або перед новим запуском -> як `componentWillUnmount`.

---

## 4. Чому React так зробив

Класові компоненти мали **окремі фази й методи**, але це:

- змушувало дублювати код (один і той самий API-запит у `componentDidMount` і `componentDidUpdate`);
- ускладнювало об'єднання логіки (наприклад, "підписка + очищення");
- призводило до **розрослого коду**.

Функціональний `useEffect` вирішує це:

- усе, що пов'язане з **однією логікою ефекту**, знаходиться **в одному місці**;
- React сам вирішує, **коли саме** викликати ефект і очищення;
- розробник керує поведінкою через залежності.

---

## Порівняння "до" і "після"

### Класовий компонент:

```javascript
class Example extends React.Component {
  componentDidMount() {
    console.log('Монтування');
  }

componentDidUpdate(prevProps) {
    if (prevProps.value !== this.props.value) {
      console.log('Оновлення');
    }
  }

componentWillUnmount() {
    console.log('Розмонтування');
  }

render() {
    return <div>{this.props.value}</div>;
  }
}
```

### Функціональний компонент з одним `useEffect`:

```javascript
function Example({ value }) {
  useEffect(() => {
    console.log('Монтування або оновлення');

return () => {
      console.log('Розмонтування');
    };
  }, [value]);

return <div>{value}</div>;
}
```

Один `useEffect` замінює одразу **три методи**, і робить це чистіше та компактніше.

---

## 5. Підсумок

> `useEffect()` - це універсальний механізм побічних ефектів,
> який залежно від залежностей (`deps`)
> може замінити `componentDidMount`, `componentDidUpdate` і `componentWillUnmount`.

| Поведінка | Класовий метод | `useEffect` |
|---|---|---|
| Монтування | `componentDidMount` | `useEffect(..., [])` |
| Оновлення | `componentDidUpdate` | `useEffect(..., [deps])` |
| Розмонтування | `componentWillUnmount` | `return cleanup` з `useEffect` |

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

Для рев’юера

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

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