useEffect Hook de Efeito
Última atualização: 2026-11-03
useEffect Hook de Efeito
useEffect é o lar declarativo para efeitos colaterais — busca de dados, inscrições, temporizadores, trabalho direto com o DOM. Ele roda após a renderização, e uma função de limpeza retornada roda antes do próximo efeito e na desmontagem.
| Grupo | Efeitos e Desempenho |
|---|---|
| Tipo | Hook |
| Desde | React 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
useEffect(() => {
// side effect
return () => { /* cleanup */ }
}, [deps]) // [] mount-only; [a, b] on changes; omit = every render⚙️ Parâmetros
| effect function | O corpo do efeito, executado após a renderização. Pode retornar uma função de limpeza. |
|---|---|
| deps (optional dependency array) | Controla o timing: [] roda uma vez após a montagem; [a, b] roda de novo quando qualquer um muda; omitir roda após cada renderização. |
Retorna：Nada. Retorne uma função de limpeza do efeito quando o desmonte for necessário.
▶ Exemplo
O exemplo roda direto: renderiza automaticamente ao expandir e edições valem na hora.
Saída：
Mostra "Running for 0s" e incrementa a cada segundo; o intervalo é limpo na desmontagem — sem vazamentos.💡 Pontos-chave
💡 Dica Todo setInterval / addEventListener / inscrição quase sempre precisa de uma limpeza — ou continua rodando após a desmontagem.
⚠️ Aviso Dependências de objeto/função esquecidas são a fonte nº 1 de bugs: referências novas a cada renderização fazem o efeito rodar sem fim.
ℹ️ Informação [] significa "relacionado apenas à montagem" — pense duas vezes antes de silenciar o aviso de lint exhaustive-deps.
🏷️ Mais Efeitos e Desempenho
💡 Casos Relacionados
Mais casos em breve.
📚 Tutoriais Relacionados
❓ Perguntas Frequentes
P Qual é a relação entre useEffect e os métodos de ciclo de vida?
R Um useEffect (com limpeza) cobre componentDidMount, componentDidUpdate e componentWillUnmount de uma só vez — pense em termos de mudança de dependências, não de fases do ciclo de vida.
P Por que meu useEffect entra em loop infinito?
R Geralmente uma dependência de objeto/função recriada a cada renderização, ou setState de um valor do qual o efeito depende. Veja a entrada Armadilhas de Efeito.
P Quando a função de limpeza roda?
R Duas vezes: logo antes da próxima execução do efeito (limpa o antigo, depois roda o novo) e na desmontagem.
