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

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

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

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

Контент

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

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

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

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

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

## Коли виконується ефект без залежностей

Якщо ти **взагалі не передаєш масив залежностей**, то ефект буде виконуватися
**після кожного рендера** компонента.

---

### Приклад:

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

function Example() {
  const [count, setCount] = useState(0);

useEffect(() => {
    console.log("Ефект виконано");
  }); // <- немає масиву залежностей!

return (
    <button onClick={() => setCount(count + 1)}>
      Натиснули {count} раз
    </button>
  );
}
```

Що станеться:

1. Компонент рендериться вперше -> `useEffect` виконується.
2. Користувач натискає кнопку -> стан `count` оновлюється -> компонент перемальовується.
3. `useEffect` знову виконується.
4. І так далі - **кожен рендер = новий виклик ефекту**.

---

### Це може бути проблемою

Такий ефект:

- запускається занадто часто,
- може викликати нескінченні цикли (якщо всередині `useEffect` змінюється стан).

---

## Приклад нескінченного циклу

```javascript
useEffect(() => {
  setCount(count + 1); // змінюємо стан
});
```

Кожен рендер викликає `setCount`, що викликає новий рендер - і знову ефект
-> **нескінченна петля рендера.**

---

## Як запобігти

Щоб виконати ефект **тільки один раз при монтуванні**,
передай **порожній масив залежностей**:

```javascript
useEffect(() => {
  console.log("Ефект виконано один раз");
}, []); // <- порожній масив
```

Тепер ефект спрацює **один раз** після першого рендера - аналог `componentDidMount()`.

---

## Підсумок

| Масив залежностей | Коли виконується ефект |
|---|---|
| відсутній | Після **кожного** рендера |
| `[]` | Тільки **один раз** - при монтуванні |
| `[a, b, c]` | При першому рендері та **при зміні будь-якої залежності** |

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

Для рев’юера

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

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