O array de dependências diz a um efeito para quem ele roda: um array vazio o faz rodar uma vez, e listar variáveis faz com que ele rode de novo sempre que qualquer uma delas mudar. O modelo mental é que o efeito se mantém em sincronia com suas dependências — todo valor reativo lido dentro do efeito deve ser listado lá honestamente. O array não é um botão de desempenho que você ajusta manualmente; é uma declaração do que o efeito depende, e o linter só consegue checar essa declaração se você o deixar ver cada valor.
Grupo
Efeitos e Desempenho
Tipo
Padrão
ℹ️ 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
useEffect(fn) // runs after every render
useEffect(fn, []) // runs once after mount
useEffect(fn, [a]) // runs when a changes (compared with Object.is)
Retorna：Sem valor de retorno; esta entrada descreve um padrão de codificação e não uma função.
▶ Exemplo
O exemplo roda direto: renderiza automaticamente ao expandir e edições valem na hora.
Saída：
Clicar em um usuário diferente mostra "Loading…" primeiro e depois o nome correspondente; mesmo cliques rápidos nunca embaralham os dados, porque o temporizador antigo é limpo.
💡 Dica Dependências são comparadas com Object.is: um objeto ou função ganha uma nova referência a cada renderização, o que significa que a dependência está, na prática, sempre mudando.
⚠️ Aviso Omitir uma dependência de propósito lhe compra menos execuções ao preço de um closure obsoleto — pense bem antes de silenciar o aviso de lint exhaustive-deps.
ℹ️ Informação A intuição de que "[] roda uma vez na montagem" costuma estar errada: assim que o efeito usa um valor que pode mudar, esse valor pertence ao array de dependências.
P Por que um objeto no array de dependências sempre faz o efeito rodar de novo?
R Cada renderização produz uma nova referência, então Object.is falha. Use useMemo para estabilizar a referência, ou armazene um valor primitivo como dependência.
P Por que [] roda duas vezes em modo de desenvolvimento?
R StrictMode invoca efeitos em dobro deliberadamente para expor efeitos colaterais que carecem de limpeza; em produção ele roda apenas uma vez.
P Como executo lógica quando uma certa prop muda?
R Liste-a no array de dependências e escreva a lógica dentro do efeito; quando precisar pular a primeira execução, use um ref para registrar se o componente já montou.
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.
