Was ist useEffect und wann wird es ausgeführt?

Question

Accepted Answer

`useEffect` führt **Nebenwirkungen** aus — Arbeit, die über Reacts Rendering hinausgeht, wie Datenabruf, Abos, Timer oder manuelle DOM-Updates. Es wird **nach** dem Rendern der Komponente ausgeführt und hält Nebenwirkungen aus dem Render-Body fern (Rendering muss rein bleiben).

## Warum es wichtig ist

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

- **`[count]`** → wird nach dem ersten Rendering und immer dann ausgeführt, wenn sich `count` ändert.
- **`[]`** (leer) → wird **einmal** nach dem Mount ausgeführt (gut für einmalige Konfiguration).
- **weggelassen** → wird nach **jedem** Rendering ausgeführt (selten das, was du willst).

## Cleanup: Funktion zurückgeben

Wenn ein Effekt etwas einrichtet, das abgerissen werden muss, gib eine Cleanup-Funktion zurück. React ruft sie vor der nächsten Effektausführung und beim Unmount auf:

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

## Warum Cleanup wichtig ist

Ohne es würde jede erneute Ausführung einen weiteren Timer/Abo hinzufügen und den alten nie entfernen — ein klassisches Speicherleck. Der Lebenszyklus für einen `[dep]` Effekt ist: *Effekt ausführen → (dep ändert sich) → Cleanup ausführen → Effekt erneut ausführen*.

**Tipp:** verwende keine Effekte für Dinge, die du während des Renders berechnen kannst (leite stattdessen Werte ab), und füge jeden Wert, den der Effekt liest, in das Abhängigkeitsarray ein (die Linting-Regel `react-hooks/exhaustive-deps` hilft).