Rules of Hooks Regras dos Hooks

Última atualização: 2026-11-03

Rules of Hooks Regras dos Hooks

Os Hooks obedecem a duas regras de ferro: chame-os apenas no nível mais alto de um componente de função ou de um Hook personalizado, nunca dentro de um loop, de uma condição ou de uma função aninhada; e chame-os apenas a partir de funções do React, nunca de funções JavaScript comuns. O React associa cada Hook ao seu estado pela ordem de chamada, por isso, assim que a ordem muda, o estado se cruza entre as posições e a UI atualiza o valor errado.

ℹ️ Informação O editor transpila JSX para JavaScript e renderiza a UI real na sandbox; os componentes são montados automaticamente — sem render manual.

📝 Sintaxe

// ✅ Call unconditionally at the top level
function Counter() {
  const [n, setN] = useState(0)
  useEffect(() => { /* ... */ }, [])
  // ❌ Not allowed: if (n > 0) useEffect(...)
  // ❌ Not allowed: useState(0) inside a for loop
  return <button onClick={() => setN(n + 1)}>{n}</button>
}

Retorna：Sem valor de retorno; trata-se de um padrão de codificação, não de uma API chamável.

▶ Exemplo

O exemplo roda direto: renderiza automaticamente ao expandir e edições valem na hora.

Saída：

O painel lista duas regras ✓ e um contra-exemplo ✗; clicar nos botões atualiza a contagem e a caixa de seleção, e os Hooks continuam executando na mesma ordem fixa independentemente da interação, de modo que o estado nunca se cruza entre as posições.

💡 Pontos-chave

🏷️ Mais Roteamento e Estado

💡 Casos Relacionados

📚 Tutoriais Relacionados

❓ Perguntas Frequentes

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

Sobre Nós