Quais são as Regras de Hooks? Por que você não pode chamar um hook condicionalmente?

Question

Accepted Answer

Hooks (`useState`, `useEffect`, etc.) têm duas regras:

1. **Chame hooks apenas no nível superior** — nunca dentro de condições, loops ou funções aninhadas.
2. **Chame hooks apenas a partir de funções React** — componentes ou outros custom hooks.

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

## Por que isso importa

React **não** identifica hooks por nome — ele depende da **ordem de chamada**. A cada renderização, ele percorre os hooks na mesma sequência exata e associa cada chamada a um slot em uma 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
```

Se você chamar um hook condicionalmente, a ordem pode mudar entre renderizações. Então o slot 1 pode ser `useState(B)` em uma renderização e `useEffect` na próxima — React passaria o estado errado para o hook errado, corrompendo tudo.

## Como escrever lógica condicional corretamente

Mantenha o hook incondicional e coloque a condição **dentro** dele, ou ramifique no valor que ele retorna:

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

A regra lint `eslint-plugin-react-hooks` impõe essas regras automaticamente.