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

Cleanup Function Limpeza de Efeito

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

Cleanup Function Limpeza de Efeito

A função de limpeza é o desmonte retornado por um efeito: ela roda uma vez antes da próxima execução desse efeito e mais uma vez quando o componente desmonta, e é o que cancela temporizadores, cancela inscrições de listeners e aborta requisições em andamento. Sem uma limpeza, o efeito colateral continua rodando depois que o componente some e vaza. A regra prática é simples: qualquer coisa que você inicia dentro de um efeito e não termina de forma síncrona precisa de uma limpeza correspondente.

GrupoEfeitos e Desempenho
TipoPadrã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(() => {
  const id = setInterval(tick, 1000)
  window.addEventListener('resize', onResize)
  return () => {                    // teardown: clear the old one before running the new one
    clearInterval(id)
    window.removeEventListener('resize', onResize)
  }
}, [])

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：

O temporizador soma um segundo a cada segundo; clicar em "Pause" o interrompe imediatamente (a função de limpeza roda), clicar em "Resume" o reinicia, e a qualquer momento apenas um temporizador está vivo.
▶ Experimente

💡 Pontos-chave

⚠️ Aviso Quando as dependências mudam, o React roda a limpeza anterior antes de rodar o novo efeito — sem entender isso você não consegue explicar o bug "o temporizador roda cada vez mais rápido".
💡 Dica setInterval, addEventListener, inscrições de eventos e fetches não finalizados devem ter uma função de limpeza.
ℹ️ Informação "Limpe o antigo primeiro, depois crie o novo" garante que apenas uma cópia de um efeito colateral esteja viva a qualquer momento.
useeffect effect-dependencies effect-pitfalls abortcontroller
Mais casos em breve.

📚 Tutoriais Relacionados

useEffect e Ciclo de Vida
Lição 9: quando a função de limpeza roda e os cenários típicos de vazamento.

❓ Perguntas Frequentes

P Todo efeito precisa retornar uma função de limpeza?
R Não. Um efeito que não possui nada para desmontar (um log puro, por exemplo) pode dispensá-la; com temporizadores, inscrições ou requisições ela é obrigatória.
P A limpeza roda quando as dependências mudam?
R Sim. Cada vez que o efeito roda de novo, a limpeza anterior roda primeiro; a última limpeza roda quando o componente desmonta.
P A função de limpeza lê o estado novo ou o estado antigo?
R O estado antigo — uma limpeza fecha sobre a renderização que a criou, que é exatamente o que cancelar o efeito colateral antigo exige.
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%