Fundamentos

Rules of Hooks

Hooks só podem ser chamados no topo de função componente, sempre na mesma ordem.

Definição

As Rules of Hooks são regras invioláveis: 1) Só chame hooks no nível superior (não em loops, condicionais ou nested functions). 2) Só chame hooks de funções React (componentes ou outros hooks). O ESLint plugin react-hooks/rules-of-hooks valida automaticamente.

Problema → Solução

Problema

Chamar hooks condicionalmente quebra o React — ele rastreia hooks por ordem de chamada, não por nome.

Solução

Sempre chamar todos os hooks no topo da função, na mesma ordem em todos os renders. Condições devem estar dentro do hook, não em volta dele.

Dica de entrevista

Tip

Se precisa chamar hook condicionalmente, extraia para um componente filho que renderiza condicionalmente.

Código

// ❌ ERRADO: hook em condicional
function Comp({ user }) {
  if (user) {
    const [data, setData] = useState(null); // QUEBRA
  }
}

// ✅ CORRETO: condicional dentro do hook
function Comp({ user }) {
  const [data, setData] = useState(null);
  useEffect(() => {
    if (user) loadData();
  }, [user]);
}

Perguntas de entrevista

Q.Por que React rastreia hooks por ordem?▾

A.Para simplicidade e performance. Com a regra de 'mesma ordem sempre', React mantém apenas um array de estados internos por componente. Sem essa regra, precisaria de identificação por nome (mais lento e verboso).

Q.Posso chamar hooks em event handlers?▾

A.Não. Hooks só em funções de componentes ou em outros hooks customizados. Em handlers, use o estado/setter retornado pelo hook chamado no topo.

Q.Como condicionar lógica de um hook?▾

A.Mover a condição PARA DENTRO do hook. Ex: useEffect(() => { if (cond) doStuff(); }, [cond]). NÃO: if (cond) useEffect(...).

21/122← →