Vilka är reglerna för Hooks? Varför kan du inte anropa en hook villkorligt?

Question

Accepted Answer

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

1. **Anropa endast hooks på den översta nivån** — aldrig inuti villkor, loopar eller kapslade funktioner.
2. **Anropa endast hooks från React-funktioner** — komponenter eller andra anpassade hooks.

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

## Varför ordningen måste vara stabil

React identifierar **inte** hooks efter namn — det förlitar sig på **anropningsordning**. Vid varje rendering går den igenom hooks i exakt samma sekvens och matchar varje anrop till en plats i en intern lista:

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

Om du anropar en hook villkorligt kan ordningen förändras mellan renderingar. Då kan plats 1 vara `useState(B)` vid en rendering och `useEffect` vid nästa — React skulle ge fel state till fel hook och förstöra allt.

## Hur man skriver villkorlig logik på rätt sätt

Håll hooken villkorslös och lägg villkoret **inuti** den, eller förgrena baserat på värdet den returnerar:

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

Regeln `eslint-plugin-react-hooks` tillämpar dessa regler automatiskt.