Jakie są powszechne pułapki dotyczące tablicy zależności useEffect i czyszczenia?

Question

Accepted Answer

Efekt uruchamia się na podstawie swoich **zależności**, a pomyłka w tej tablicy jest #1 źródłem błędów React.

## Dlaczego to ważne

Efekt zamyka się nad wartościami z renderowania, w którym został utworzony. Jeśli pominiesz zależność, będzie nadal używać starej:

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

Rozwiązanie: albo dodaj `count` do deps, albo użyj funkcjonalnego updatera, który go nie potrzebuje (`setCount(c => c + 1)`).

## Pułapka 2: niestabilne zależności → efekt uruchamia się przy każdym renderowaniu

Obiekty/tablice/funkcje są odtwarzane przy każdym renderowaniu, więc są "nowe" za każdym razem i efekt nigdy się nie stabilizuje:

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

Rozwiązanie: zależeć od primitywu (`[id]`), lub zmemoizuj za pomocą `useMemo`/`useCallback`.

## Pułapka 3: zapomniane czyszczenie → wycieki i warunki wyścigu

```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 czyszczenia starsze, wolne żądanie mogło rozwiązać się *po* nowszym i zastąpić świeże dane (warunek wyścigu), a subskrypcje/timery gromadziłyby się. Reguła ESLint `react-hooks/exhaustive-deps` łapie większość przypadków brakujących zależności.