Quelles sont les Règles des Hooks ? Pourquoi ne pouvez-vous pas appeler un hook de manière conditionnelle ?

Question

Accepted Answer

Les Hooks (`useState`, `useEffect`, etc.) ont deux règles :

1. **Appelez les hooks uniquement au niveau supérieur** — jamais à l'intérieur de conditions, de boucles ou de fonctions imbriquées.
2. **Appelez les hooks uniquement à partir de fonctions React** — composants ou autres hooks personnalisés.

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

## Pourquoi c'est important

React **n'identifie pas** les hooks par leur nom — il s'appuie sur l'**ordre d'appel**. À chaque rendu, il parcourt les hooks dans le même ordre exact et associe chaque appel à un emplacement dans une liste interne :

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

Si vous appelez un hook de manière conditionnelle, l'ordre peut changer entre les rendus. Alors l'emplacement 1 pourrait être `useState(B)` lors d'un rendu et `useEffect` lors du suivant — React fournirait le mauvais état au mauvais hook, ce qui corromprait tout.

## Comment écrire correctement la logique conditionnelle

Conservez le hook inconditionnelle et placez la condition **à l'intérieur** de celui-ci, ou branchez-vous sur la valeur qu'il retourne :

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

La règle `eslint-plugin-react-hooks` lint applique automatiquement ces règles.