Angular Academy · Aula

Efeitos e efeitos colaterais

Reaja a alterações de sinais com efeitos.

Efeitos e efeitos colaterais é uma aula grátis de Angular Academy no CoddyKit. Esta é a aula 2 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.

O que é um efeito

Um effect() executa uma função sempre que qualquer sinal lido por ela muda. Diferentemente dos sinais computados, os efeitos servem para efeitos colaterais: registrar informações, sincronizar com localStorage, chamar APIs e manipular o DOM.

Os efeitos não retornam um valor.

Criando um efeito

Um efeito é executado uma vez imediatamente e, depois, novamente toda vez que um sinal acompanhado muda.

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

const count = signal(0);

effect(() => {
  console.log('count is', count());
});
// logs "count is 0" immediately
count.set(5); // logs "count is 5"

Efeitos precisam de um contexto de injeção

Por padrão, effect() precisa ser criado em um contexto de injeção — normalmente em um construtor ou inicializador de campo de um componente, diretiva ou serviço.

import { Component, signal, effect } from '@angular/core';

@Component({ selector: 'app-x', template: '' })
export class XComponent {
  user = signal('guest');
  constructor() {
    effect(() => console.log('user:', this.user()));
  }
}

Acompanhamento automático de dependências

Assim como os sinais computados, os efeitos acompanham exatamente os sinais que leem durante a execução. Leituras condicionais são acompanhadas somente quando alcançadas.

const enabled = signal(true);
const value = signal(10);

effect(() => {
  if (enabled()) {
    console.log(value());
  }
});
// When enabled() is false, value is not a dependency

Sincronizando sinais com localStorage

Um caso de uso clássico de um efeito: persistir o estado sempre que ele muda.

const theme = signal('light');

effect(() => {
  localStorage.setItem('theme', theme());
});

theme.set('dark'); // writes "dark" to localStorage

Efeitos não retornam valores

Se você precisa de um valor derivado, use computed(). Os efeitos servem para ações sem retorno; o resultado deles é o próprio efeito colateral.

// WRONG: trying to derive state in an effect
// effect(() => this.total = this.a() + this.b());

// RIGHT: derive with computed
// total = computed(() => this.a() + this.b());

Definindo sinais dentro de efeitos

Por padrão, o Angular não permite escrever em sinais dentro de um efeito para evitar ciclos. Se isso for realmente necessário, passe { allowSignalWrites: true } — mas prefira sinais computados para derivações.

effect(() => {
  const v = source();
  derived.set(v * 2);
}, { allowSignalWrites: true });
// Use sparingly; computed() is usually better

Limpeza manual com EffectRef

effect() retorna um EffectRef. Chame .destroy() para interrompê-lo manualmente antes que o proprietário seja destruído.

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

const ref = effect(() => console.log(value()));
// later
ref.destroy(); // effect no longer runs

Os efeitos são limpos automaticamente

Quando criado em um componente, um efeito é destruído automaticamente quando o componente é destruído. Raramente é necessário chamar .destroy() por conta própria.

Os efeitos são executados após a renderização

Os efeitos são agendados e executados após a detecção de alterações, agrupados por mic tarefa. Várias alterações síncronas em sinais acionam o efeito apenas uma vez.

const a = signal(0);

effect(() => console.log(a()));

a.set(1);
a.set(2);
a.set(3);
// Effect runs once with the final value 3 (batched)

Quando usar effect ou computed

computed: derivar um valor de sinais (puro).
effect: reagir a sinais fazendo algo externo (impuro).

Se você perceber que está retornando um valor de um efeito, provavelmente precisa de um sinal computado.

Verificação rápida

Teste sua compreensão sobre efeitos.

Recapitulação: efeitos

effect() executa uma função sempre que os sinais acompanhados por ela mudam, exclusivamente para efeitos colaterais.

É executado uma vez imediatamente e depois a cada alteração de dependência.
Precisa de um contexto de injeção.
É destruído automaticamente com seu proprietário; retorna um EffectRef para controle manual.
Use sinais computados para derivações e efeitos para ações.

A seguir: limpando recursos dentro de efeitos.

Perguntas Frequentes

A aula “Efeitos e efeitos colaterais” é grátis?

Sim — o texto completo de “Efeitos e efeitos colaterais” é 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 “Efeitos e efeitos colaterais”?

Reaja a alterações de sinais com 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 2 de 4.

Quanto tempo leva a aula “Efeitos e efeitos colaterais”?

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