English 中文 العربية 日本語 Português

Custom Hooks Hooks Personalizados

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

Custom Hooks Hooks Personalizados

Um hook personalizado é uma função comum cujo nome começa com use, que pode chamar outros hooks dentro dela e transforma lógica com estado — como requisições, debounce, persistência ou alternância — em uma unidade reutilizável. Cada chamada possui seu próprio estado — o que é reutilizado é a lógica, não o próprio estado. É o jeito padrão de compartilhar comportamento entre componentes sem compartilhar dados, e mantém o estado de cada componente local e fácil de raciocinar.

GrupoPadrões de Componentes
TipoHook
DesdeReact 16.8

ℹ️ 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

// the name must start with use so that ESLint can check the rules of hooks
function useToggle(initial = false) {
  const [on, setOn] = useState(initial)
  const toggle = () => setOn(v => !v)
  return [on, toggle]        // the return shape is up to you: an array or an object
}

Retorna：Sem assinatura fixa — você a define. Por convenção, retorna uma tupla [valor, ação] ou um objeto contendo um conjunto de ações.

▶ Exemplo

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

Saída：

Os dois botões alternam de forma independente — Lamp e Fan mantêm cada um seu próprio estado on que nunca interfere no outro, mas ambos compartilham a mesma lógica useToggle.
▶ Experimente

💡 Pontos-chave

💡 Dica Dois componentes que chamam o mesmo hook personalizado mantêm estados completamente separados — um hook reutiliza lógica, não compartilha estado.
ℹ️ Informação Quando você realmente precisar de estado compartilhado, eleve o estado ou mova-o para um Context; um hook personalizado ainda pode compor useState e useEffect dentro dele.
⚠️ Aviso Chame-o apenas no nível superior de um componente ou de outro hook, nunca dentro de um if, de um loop ou de uma função comum — as mesmas regras de todo hook.
usestate useeffect hooks-rules provider-pattern
Mais casos em breve.

📚 Tutoriais Relacionados

Hooks Personalizados
Lição 14: extração prática de useToggle a useFetch.

❓ Perguntas Frequentes

P O estado dentro de um hook personalizado é compartilhado?
R Não. Cada chamada cria seu próprio estado separado, mais como herança funcional de lógica do que um singleton.
P Devo retornar um array ou um objeto?
R Retorne um array quando houver dois ou três valores com semântica clara, para que a desestruturação possa renomeá-los; retorne um objeto quando houver muitas ações ou espaço para crescer.
P O nome realmente precisa começar com use?
R Fortemente recomendado: é a convenção na qual o React e o ESLint se apoiam para reconhecer hooks e aplicar as regras dos hooks; quebrá-la desativa toda a verificação de lint.
Web-Tutorial.com

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.

100%