Что такое useEffect и когда он выполняется?

Question

Accepted Answer

`useEffect` выполняет **побочные эффекты** — работу, которая выходит за рамки рендеринга React, такую как получение данных, подписки, таймеры или ручные обновления DOM. Он выполняется **после** рендеринга компонента, удерживая побочные эффекты вне тела рендеринга (рендеринг должен оставаться чистым).

## Почему это важно

```jsx
useEffect(() => {
  document.title = `Count: ${count}`;
}, [count]); // ← dependency array
```

- **`[count]`** → выполняется после первого рендеринга и всякий раз, когда меняется `count`.
- **`[]`** (пусто) → выполняется **один раз** после монтирования (хорошо для одноразовой настройки).
- **опущено** → выполняется после **каждого** рендеринга (редко то, что нужно).

## Очистка: вернуть функцию

Если эффект что-то устанавливает, что требует очистки, верните функцию очистки. React вызывает её перед следующим запуском эффекта и когда компонент размонтируется:

```jsx
useEffect(() => {
  const id = setInterval(() => setN(n => n + 1), 1000);
  return () => clearInterval(id); // cleanup → prevents a leaked timer
}, []);
```

## Почему очистка важна

Без неё каждый повторный запуск добавлял бы ещё один таймер/подписку и никогда не удалял бы старый — классическая утечка памяти. Жизненный цикл для эффекта `[dep]` это: *запустить эффект → (dep меняется) → запустить очистку → запустить эффект снова*.

**Совет:** не используйте эффекты для того, что вы можете вычислить во время рендеринга (вместо этого выводите значения), и включайте каждое значение, которое эффект читает, в массив зависимостей (правило линтера `react-hooks/exhaustive-deps` помогает).