Was sind die Rules of Hooks? Warum kannst du einen Hook nicht bedingt aufrufen?

Question

Accepted Answer

Hooks (`useState`, `useEffect`, usw.) haben zwei Regeln:

1. **Rufe Hooks nur auf der obersten Ebene auf** — niemals in Bedingungen, Schleifen oder verschachtelten Funktionen.
2. **Rufe Hooks nur von React-Funktionen auf** — Komponenten oder andere Custom Hooks.

```jsx
function Profile({ id }) {
  const [user, setUser] = useState(null); // ✅ top level
  if (id) {
    const [x] = useState(0);  // ❌ conditional hook — breaks React
  }
}
```

## Warum es wichtig ist

React identifiziert Hooks **nicht** anhand des Namens — es verlässt sich auf die **Aufrufreihenfolge**. Bei jedem Rendern durchläuft es die Hooks in exakt derselben Reihenfolge und ordnet jeden Aufruf einem Slot in einer internen Liste zu:

```text
Render 1:  useState(A) → slot 0,  useState(B) → slot 1,  useEffect → slot 2
Render 2:  useState(A) → slot 0,  useState(B) → slot 1,  useEffect → slot 2
```

Wenn du einen Hook bedingt aufrufst, kann sich die Reihenfolge zwischen Renderings ändern. Dann könnte Slot 1 bei einem Rendern `useState(B)` und beim nächsten `useEffect` sein — React würde den falschen State dem falschen Hook übergeben und alles beschädigen.

## So schreibst du bedingte Logik richtig

Halte den Hook unbedingt und platziere die Bedingung **darin**, oder verzweige dich basierend auf dem Wert, den er zurückgibt:

```jsx
const [user, setUser] = useState(null);
useEffect(() => {
  if (!id) return;       // condition INSIDE the effect, not around it
  fetchUser(id).then(setUser);
}, [id]);
```

Die `eslint-plugin-react-hooks` Lint-Regel erzwingt diese Regeln automatisch.