Welche sind häufige Fallstricke beim useEffect-Abhängigkeitsarray und beim Cleanup?

Question

Accepted Answer

Ein Effect wird basierend auf seinen **Abhängigkeiten** erneut ausgeführt, und ein Fehler bei diesem Array ist die #1-Quelle für React-Fehler.

## Warum es wichtig ist

### Fallstrick 1: fehlende Abhängigkeiten → veraltete Werte

Ein Effect erfasst die Werte aus dem Render, in dem es erstellt wurde. Wenn du eine Abhängigkeit auslässt, verwendet es weiterhin einen alten Wert:

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

Lösung: Entweder füge `count` zu deps hinzu, oder verwende einen funktionalen Updater, der ihn nicht benötigt (`setCount(c => c + 1)`).

### Fallstrick 2: instabile Abhängigkeiten → Effect läuft bei jedem Render

Objekte/Arrays/Funktionen werden bei jedem Render neu erstellt, also sind sie jedes Mal "neu" und der Effect stabilisiert sich nie:

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

Lösung: Abhängigkeit von der primitiven Bedingung (`[id]`) oder Memoization mit `useMemo`/`useCallback`.

### Fallstrick 3: vergessenes Cleanup → Speicherlecks und 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]);
```

Ohne Cleanup könnte eine langsame ältere Anfrage *nach* einer neueren aufgelöst werden und frische Daten überschreiben (eine Race Condition), und Abos/Timer würden sich anhäufen. Die ESLint-Regel `react-hooks/exhaustive-deps` erfasst die meisten Fälle mit fehlenden Abhängigkeiten.