Jaké jsou běžné chyby u pole závislostí useEffect a vyčištění?

Question

Accepted Answer

Efekt se znovu spustí na základě jeho **závislostí** a špatné vyřešení tohoto pole je #1 zdroj chyb v Reactu.

## Chyba 1: chybějící závislosti → zastaralé hodnoty

Efekt zavírá hodnoty z renderu, ve kterém byl vytvořen. Pokud vynecháte závislost, budou stále používány staré hodnoty:

```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
```

Oprava: buď přidejte `count` do deps, nebo použijte funkční updater, který je nepotřebuje (`setCount(c => c + 1)`).

## Chyba 2: nestabilní závislosti → efekt se spustí při každém renderu

Objekty/pole/funkce jsou při každém renderu znovu vytvářeny, takže jsou pokaždé "nové" a efekt se nikdy neustálí:

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

Oprava: závisle na primitivní hodnotě (`[id]`), nebo si zapamatujte s `useMemo`/`useCallback`.

## Chyba 3: zapomenuté vyčištění → úniky a 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]);
```

Bez vyčištění by pomalý starší požadavek mohl být vyřešen *po* novějším a přepsat čerstvá data (race condition), a odběry/časovače by se hromadily. Pravidlo ESLint `react-hooks/exhaustive-deps` zachycuje většinu případů chybějících závislostí.