Какие распространённые ошибки допускают с массивом зависимостей useEffect и очисткой?

Question

Accepted Answer

Эффект перезапускается в зависимости от своих **зависимостей**, и неправильный массив — это #1 источник ошибок React.

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

Эффект замыкается над значениями из render-а, в котором он был создан. Если вы опустите зависимость, он будет использовать старую:

```jsx
useEffect(() => {
  const id = setInterval(() => {
    console.log(count); // ❌ always logs the count from the FIRST render (0)
  }, 1000);
  return () => clearInterval(id);
}, []); // empty deps → effect never re-created → `count` frozen at 0
```

Исправление: либо добавьте `count` в deps, либо используйте функциональный updater, который в нём не нуждается (`setCount(c => c + 1)`).

## Ошибка 2: нестабильные зависимости → эффект выполняется при каждом render-е

Объекты/массивы/функции пересоздаются при каждом render-е, поэтому они «новые» каждый раз и эффект никогда не стабилизируется:

```jsx
const options = { id }; // ❌ new object every render
useEffect(() => { load(options); }, [options]); // runs every render
```

Исправление: зависьте от примитива (`[id]`) или используйте мемоизацию с `useMemo`/`useCallback`.

## Ошибка 3: забытая очистка → утечки и race conditions

```jsx
useEffect(() => {
  const ctrl = new AbortController();
  fetch(url, { signal: ctrl.signal }).then(setData);
  return () => ctrl.abort(); // cancels the old request when `url` changes
}, [url]);
```

Без очистки старый медленный запрос может разрешиться *после* более нового и перезаписать свежие данные (race condition), а подписки/таймеры будут накапливаться. ESLint правило `react-hooks/exhaustive-deps` ловит большинство случаев отсутствующих зависимостей.