Wat zijn de Regels van Hooks? Waarom kunt u een hook niet voorwaardelijk aanroepen?

Question

Accepted Answer

Hooks (`useState`, `useEffect`, enzovoort) hebben twee regels:

1. **Roep hooks alleen op het topniveau aan** — nooit binnen voorwaarden, loops of geneste functies.
2. **Roep hooks alleen aan vanuit React-functies** — componenten of andere custom hooks.

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

## Waarom het belangrijk is

React **herkent** hooks niet op naam — het vertrouwt op **aanroepvolgorde**. Bij elke render doorloopt het hooks in exact dezelfde volgorde en koppelt elke aanroep aan een plaats in een interne lijst:

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

Als u een hook voorwaardelijk aanroept, kan de volgorde tussen renders veranderen. Dan kan plaats 1 op de ene render `useState(B)` zijn en op de volgende `useEffect` — React zou de verkeerde state naar de verkeerde hook sturen, wat alles beschadigt.

## Hoe voorwaardelijke logica correct schrijven

Houd de hook onvoorwaardelijk en zet de voorwaarde **erin**, of vertakking op de waarde die deze retourneert:

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

De lint-regel `eslint-plugin-react-hooks` dwingt deze regels automatisch af.