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

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

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

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

Контент

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

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

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

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

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

## Що робить `useEffect()`

Хук `useEffect()` дозволяє **виконувати побічні ефекти** у функціональному компоненті.

> "Побічний ефект" - це все, що виходить за межі простого рендера JSX:
>
> - запити до сервера,
> - робота з `localStorage`,
> - підписки і таймери,
> - зміна `document.title`,
> - взаємодія з DOM.

---

## Синтаксис

```javascript
useEffect(() => {
  // побічний ефект
  return () => {
    // необов'язкове очищення
  };
}, [dependencies]);
```

- Перший аргумент - функція (ефект), яка виконується **після рендера**.
- Другий аргумент - **масив залежностей**, який керує **коли ефект виконується**.
- Функція, яку повертає ефект, - це **"очищення" (cleanup)**, виконується **перед видаленням** компонента або перед повторним запуском ефекту.

---

## Приклад - запит до API

```javascript
import { useEffect, useState } from "react";

function User() {
  const [user, setUser] = useState(null);

useEffect(() => {
    fetch("/api/user")
      .then(res => res.json())
      .then(setUser);
  }, []); // порожній масив -> ефект запуститься один раз

return <div>{user ? user.name : "Завантаження..."}</div>;
}
```

Тут `useEffect` робить запит один раз при **монтуванні компонента**.
(так само, як `componentDidMount()` у класах)

---

## Як працює масив залежностей

| Масив залежностей | Коли виконується ефект |
|---|---|
| `[]` | Один раз - при монтуванні |
| `[someValue]` | При першому рендері і при зміні `someValue` |
| *немає масиву* | При **кожному рендері** |

### Приклад:

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

Запуститься при першому рендері і щоразу, коли зміниться `count`.

---

## Очищення ефекту

Якщо ефект створює щось, що потрібно **скасувати або звільнити** (наприклад, таймер або підписку),
то можна повернути функцію "очищення":

```javascript
useEffect(() => {
  const timer = setInterval(() => console.log("tick"), 1000);

return () => {
    clearInterval(timer); // очищуємо при розмонтуванні
  };
}, []);
```

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

---

## Приклад - зміна заголовка сторінки

```javascript
const [count, setCount] = useState(0);

useEffect(() => {
  document.title = `Clicked ${count} times`;
}, [count]);
```

Щоразу, коли `count` змінюється, оновлюється `document.title`.

---

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

| Правило | Пояснення |
|---|---|
| `useEffect` завжди виконується **після рендера** | Не блокує інтерфейс |
| Масив залежностей обов'язковий | Без нього ефект виконується при кожному рендері |
| Повернення функції - це **очищення ефекту** | Використовується для відписки або очищення ресурсів |
| `useEffect` не можна викликати всередині умов або циклів | Тільки на верхньому рівні компонента |

---

## Підсумок

| Питання | Відповідь |
|---|---|
| Що робить `useEffect()` | Дозволяє виконувати побічні ефекти (запити, таймери, підписки, DOM-операції) |
| Коли виконується | Після рендера, залежно від залежностей |
| Що робить функція, яку повертають | Очищує ефект (наприклад, відписує або зупиняє таймери) |

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

Для рев’юера

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

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