Quali sono le regole degli Hooks? Perché non puoi chiamare un hook in modo condizionale?

Question

Accepted Answer

Gli Hooks (`useState`, `useEffect`, ecc.) hanno due regole:

1. **Chiama gli hooks solo al livello superiore** — mai all'interno di condizioni, cicli o funzioni annidate.
2. **Chiama gli hooks solo dalle funzioni React** — componenti o altri custom hooks.

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

## Perché l'ordine deve essere stabile

React **non** identifica gli hooks per nome — si basa sull'**ordine di chiamata**. Ad ogni render, percorre gli hooks nello stesso ordine esatto e abbina ogni chiamata a uno slot in un elenco interno:

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

Se chiami un hook in modo condizionale, l'ordine può cambiare tra i render. Allora lo slot 1 potrebbe essere `useState(B)` su un render e `useEffect` sul successivo — React passerebbe lo state sbagliato all'hook sbagliato, corrompendo tutto.

## Perché è importante

Mantenere l'hook incondizionato e mettere la condizione **al suo interno**, o fai un branch sul valore che restituisce:

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

La regola di lint `eslint-plugin-react-hooks` applica automaticamente queste regole.