Hvad er Rules of Hooks? Hvorfor kan du ikke kalde en hook betinget?

Question

Accepted Answer

Hooks (`useState`, `useEffect`, osv.) har to regler:

1. **Kald kun hooks på øverste niveau** — aldrig inde i betingelser, løkker eller indlejrede funktioner.
2. **Kald kun hooks fra React funktioner** — komponenter eller andre brugerdefinerede hooks.

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

## Hvorfor rækkefølgen skal være stabil

React **identificerer ikke** hooks efter navn — det er afhængig af **kaldrækkefølge**. Ved hver rendering gennemgår det hooks i nøjagtig samme sekvens og matcher hver kald til et slot i en intern liste:

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

Hvis du kalder en hook betinget, kan rækkefølgen ændre sig mellem renderings. Så slot 1 kan være `useState(B)` ved en rendering og `useEffect` ved den næste — React ville give den forkerte state til den forkerte hook, hvilket ødelægger alt.

## Hvordan man skriver betingelseslogik korrekt

hold hooken ubetinget og placér betingelsen **inde i** den, eller branch på den værdi den returnerer:

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

reglen `eslint-plugin-react-hooks` lint håndhæver disse regler automatisk.