Fundamentos de useEffect: dependências e limpeza
Execute efeitos colaterais após a renderização, controle quando eles são executados novamente com o array de dependências e retorne uma função de limpeza para evitar vazamentos de memória.
Fundamentos de useEffect: dependências e limpeza é uma aula grátis de Frontend Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Frontend Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Frontend Academy inclui 4 aulas no total.
O que é useEffect?
useEffect executa um efeito colateral depois que o React renderiza. Efeitos colaterais incluem buscar dados, inscrever-se em eventos, configurar temporizadores e interagir com APIs externas. Os efeitos são executados depois da pintura, não durante a renderização.
Sintaxe básica
useEffect(effect, deps?). A função do efeito é executada após cada renderização por padrão. Forneça um vetor de dependências para controlar quando ela será executada.
import { useEffect } from 'react';
function Component() {
useEffect(() => {
console.log('Ran after every render');
});
}O vetor de dependências controla quando o efeito é executado
Vetor vazio []: execute uma vez após a montagem. Vetor não vazio [a, b]: execute quando a ou b mudar. Sem vetor: execute após cada renderização, o que raramente é desejável.
// Run once on mount:
useEffect(() => {
fetchInitialData();
}, []);
// Run when userId changes:
useEffect(() => {
fetchUser(userId);
}, [userId]);
// Run after every render (usually a bug):
useEffect(() => {
trackPageView();
});A função de limpeza
Retorne uma função de useEffect para executar a limpeza: remova ouvintes de eventos, cancele inscrições e limpe temporizadores. A limpeza é executada antes do próximo efeito e durante a desmontagem.
useEffect(() => {
const handleResize = () => setWidth(window.innerWidth);
window.addEventListener('resize', handleResize);
// Cleanup: remove listener when effect re-runs or component unmounts
return () => {
window.removeEventListener('resize', handleResize);
};
}, []);Fechamentos obsoletos nas dependências
Os efeitos capturam os valores que referenciam no momento em que são criados. Se você ler um valor de estado ou de propriedade dentro de um efeito sem incluí-lo nas dependências, verá um valor obsoleto. A regra exhaustive-deps do ESLint detecta isso.
Regra exhaustive-deps do ESLint
A regra react-hooks/exhaustive-deps do ESLint avisa quando faltam dependências do efeito. Quase sempre é correto seguir suas sugestões, pois dependências obsoletas causam erros.
useEffect versus useLayoutEffect
useEffect é executado depois que o navegador pinta a tela. useLayoutEffect é executado de forma síncrona depois das mutações do DOM, antes da pintura. Use useLayoutEffect para ler medidas do DOM e evitar oscilações visuais.
Vários efeitos
Use várias chamadas de useEffect para separar responsabilidades não relacionadas. Cada efeito pode ter seu próprio vetor de dependências e sua própria lógica de limpeza.
// Separate effects for separate concerns:
useEffect(() => { document.title = `${count} items`; }, [count]);
useEffect(() => {
const sub = wsClient.subscribe(onMessage);
return () => sub.unsubscribe();
}, []);Condições de corrida — o sinalizador ignore
Quando um efeito busca dados com base nas propriedades, solicitações anteriores podem ser concluídas depois das posteriores. Use um sinalizador ignore na limpeza para descartar respostas obsoletas.
useEffect(() => {
let ignore = false;
async function load() {
const data = await fetchUser(userId);
if (!ignore) setUser(data); // only update if not cleaned up
}
load();
return () => { ignore = true; };
}, [userId]);Dupla execução do efeito no modo Strict
O Strict Mode do React 18 monta, desmonta e monta novamente os componentes durante o desenvolvimento para revelar erros de limpeza. Seus efeitos serão executados duas vezes — isso é intencional e ajuda a detectar a ausência de limpeza.
Quando não usar useEffect
Não use useEffect para: 1) derivar o estado das propriedades, calcule-o durante a renderização; 2) redefinir o estado quando as propriedades mudarem, use uma propriedade de chave; 3) atualizar o estado incondicionalmente, pois isso causa ciclos. Em caso de dúvida, pergunte: este código reage a um evento do usuário ou a um sistema externo?
Verificação rápida
Quando uma função de limpeza de useEffect é executada?
Recapitulação: useEffect
Efeitos colaterais são executados depois da renderização. Vetor de dependências vazio = uma vez durante a montagem. Vetor de dependências = quando alterações específicas ocorrerem. Retorne uma função de limpeza para evitar vazamentos. Use vários efeitos para responsabilidades separadas. O sinalizador ignore impede respostas obsoletas de buscas. O Strict Mode executa os efeitos duas vezes para testar a limpeza. Não use useEffect para valores derivados ou estados que possam ser calculados durante a renderização.
Perguntas Frequentes
A aula “Fundamentos de useEffect: dependências e limpeza” é grátis?
Sim — o texto completo de “Fundamentos de useEffect: dependências e limpeza” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Frontend Academy, atualize para CoddyKit PRO. O curso de Frontend Academy inclui 4 aulas no total.
O que vou aprender em “Fundamentos de useEffect: dependências e limpeza”?
Execute efeitos colaterais após a renderização, controle quando eles são executados novamente com o array de dependências e retorne uma função de limpeza para evitar vazamentos de memória. Você pratica Frontend Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Frontend Academy?
Nenhuma experiência prévia é necessária. Frontend Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.
Quanto tempo leva a aula “Fundamentos de useEffect: dependências e limpeza”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Frontend Academy?
Sim. Cada aula de Frontend Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Fundamentos de useEffect: dependências e limpeza
- Buscando dados na montagem
- Lidando com estados de carregamento e erro
- AbortController para limpeza