¿Cuáles son las Reglas de los Hooks? ¿Por qué no puedes llamar a un hook de forma condicional?

Question

Accepted Answer

Los hooks (`useState`, `useEffect`, etc.) tienen dos reglas:

1. **Llama a los hooks solo en el nivel superior** — nunca dentro de condiciones, bucles o funciones anidadas.
2. **Llama a los hooks solo desde funciones de React** — componentes u otros hooks personalizados.

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

## Por qué el orden debe ser estable

React **no** identifica los hooks por su nombre: se basa en el **orden de llamada**. En cada render recorre los hooks en exactamente la misma secuencia y asocia cada llamada a una posición en una lista interna:

```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 llamas a un hook de forma condicional, el orden puede cambiar entre renders. Entonces la posición 1 podría ser `useState(B)` en un render y `useEffect` en el siguiente, y React entregaría el estado equivocado al hook equivocado, corrompiéndolo todo.

## Cómo escribir lógica condicional correctamente

Mantén el hook incondicional y pon la condición **dentro** de él, o ramifica según el valor que devuelve:

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

La regla de lint `eslint-plugin-react-hooks` aplica estas reglas automáticamente.