Angular Academy · Aula

Limpeza e ciclo de vida dos efeitos

Limpe recursos dentro dos efeitos.

Limpeza e ciclo de vida dos efeitos é uma aula grátis de Angular Academy no CoddyKit. Esta é a aula 3 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 Angular Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Angular Academy inclui 4 aulas no total.

Por que a limpeza é importante

Um efeito pode iniciar recursos: temporizadores, inscrições e ouvintes de eventos. Cada vez que o efeito é executado novamente, o recurso antigo deve ser encerrado primeiro — caso contrário, você vazará temporizadores e ouvintes. O Angular fornece um gancho onCleanup para isso.

O retorno de chamada onCleanup

A função do efeito recebe uma função onCleanup. Registre nela um retorno de chamada de encerramento; o Angular o chama antes da próxima execução e na destruição.

import { effect } from '@angular/core';

effect((onCleanup) => {
  const id = setInterval(() => console.log('tick'), 1000);
  onCleanup(() => clearInterval(id));
});

A limpeza é executada antes de cada nova execução

Quando uma dependência muda, o Angular primeiro chama a limpeza registrada e depois executa novamente o corpo do efeito. Isso garante que apenas um recurso esteja ativo por vez.

const delay = signal(1000);

effect((onCleanup) => {
  const id = setInterval(() => console.log('tick'), delay());
  onCleanup(() => clearInterval(id)); // clears old interval first
});

delay.set(500); // old interval cleared, new one started

Limpando ouvintes de eventos

Os ouvintes do DOM adicionados em um efeito devem ser removidos durante a limpeza para evitar manipuladores duplicados e vazamentos.

effect((onCleanup) => {
  const handler = () => console.log(window.innerWidth);
  window.addEventListener('resize', handler);
  onCleanup(() => window.removeEventListener('resize', handler));
});

Limpando inscrições

Se um efeito fizer uma inscrição em um Observable, cancele-a durante a limpeza. (Frequentemente você usaria outras ferramentas, mas isto demonstra o padrão.)

effect((onCleanup) => {
  const sub = interval$.subscribe(v => console.log(v));
  onCleanup(() => sub.unsubscribe());
});

Limpando na destruição

Quando o componente proprietário do efeito é destruído, o Angular executa automaticamente a limpeza final e depois destrói o efeito. Nenhum temporizador fica vazando.

Ordem: limpeza e depois corpo

Na primeira execução de um efeito, não há nada para limpar. A partir da segunda execução, a sequência é sempre: limpeza -> corpo.

let runs = 0;
effect((onCleanup) => {
  runs++;
  console.log('run', runs, dep());
  onCleanup(() => console.log('cleanup before run', runs + 1));
});

Evite trabalho pesado sem limpeza

Qualquer recurso de longa duração iniciado em um efeito deve ter uma limpeza correspondente. Um erro comum é esquecer a limpeza, fazendo com que os intervalos se acumulem a cada alteração de dependência.

Opção manualCleanup

Para efeitos criados fora de um componente (por exemplo, em um serviço raiz que permanece ativo indefinidamente), você pode usar a opção manualCleanup e depois chamar ref.destroy() por conta própria quando for apropriado.

const ref = effect(() => {
  console.log(value());
}, { manualCleanup: true });

// You are now responsible for:
// ref.destroy();

DestroyRef como alternativa

Para encerramentos que não sejam de efeitos, você pode injetar DestroyRef e registrar retornos de chamada com onDestroy. Dentro de efeitos, prefira onCleanup para o encerramento a cada execução.

import { inject, DestroyRef } from '@angular/core';

const destroyRef = inject(DestroyRef);
destroyRef.onDestroy(() => console.log('component destroyed'));

Juntando tudo

Um efeito de sincronização com atraso: cada alteração de valor cancela o temporizador anterior e agenda um novo salvamento.

const query = signal('');

effect((onCleanup) => {
  const q = query();
  const id = setTimeout(() => save(q), 300);
  onCleanup(() => clearTimeout(id));
});

Verificação rápida

Teste sua compreensão sobre a limpeza de efeitos.

Recapitulação: limpeza e ciclo de vida dos efeitos

Use o parâmetro onCleanup para encerrar recursos iniciados dentro de um efeito.

A limpeza é executada antes de cada nova execução e na destruição.
Sempre limpe temporizadores, ouvintes e inscrições.
manualCleanup para efeitos de longa duração; DestroyRef para encerramento geral.

A seguir: linkedSignal e padrões avançados.

Perguntas Frequentes

A aula “Limpeza e ciclo de vida dos efeitos” é grátis?

Sim — o texto completo de “Limpeza e ciclo de vida dos efeitos” é 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 Angular Academy, atualize para CoddyKit PRO. O curso de Angular Academy inclui 4 aulas no total.

O que vou aprender em “Limpeza e ciclo de vida dos efeitos”?

Limpe recursos dentro dos efeitos. Você pratica Angular 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 Angular Academy?

Nenhuma experiência prévia é necessária. Angular 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 3 de 4.

Quanto tempo leva a aula “Limpeza e ciclo de vida dos efeitos”?

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 Angular Academy?

Sim. Cada aula de Angular 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

← Voltar para Angular Academy