Esta é a lição 7 do Curso de Angular Moderno . Nas lições anteriores, abordamos sinais graváveis ​​para estado e sinais computados para valores derivados. Agora, completamos o trio de sinais introduzindo os efeitos — a maneira como o Angular lida com efeitos colaterais de forma reativa e previsível.

Este post faz parte da série do Curso de Angular Moderno . Confira a página do curso para ver a lista completa de episódios.

Neste post, abordaremos:

• Por que os efeitos existem e que problema eles resolvem
• O que é um efeito e como ele funciona.
• Como criar seu primeiro efeito
• Como os efeitos diferem dos sinais computados
• Casos de uso comuns e erros comuns
• Ciclo de vida e limpeza do efeito

Por que os efeitos existem

Até agora, nossos sinais têm se concentrado em estado e valores . Sinais graváveis ​​armazenam estado. Sinais computados derivam valores desse estado. Mas, em aplicações reais, muitas vezes precisamos reagir a mudanças de estado de maneiras que vão além do cálculo de um valor.

Exemplos:

• Registrar quando um valor muda.
• Sincronizando o estado comlocalStorage
• Acionando eventos analíticos
• Chamando uma API imperativa de terceiros

Esses são efeitos colaterais — coisas que interagem com o mundo exterior. Os efeitos existem justamente para lidar com isso.

O que é um efeito?

Um efeito é uma função que:

• É executado sempre que um dos sinais que lê muda.
• É usado para efeitos colaterais, não para derivar valores.
• Não retorna um valor.

Você não chama um efeito manualmente. O Angular o executa automaticamente quando suas dependências mudam. Assim como os sinais computados, o Angular rastreia quais sinais um efeito lê e o executa novamente quando esses sinais são atualizados.

Criando seu primeiro efeito

Vamos adicionar um efeito ao nosso Hellocomponente. Primeiro, importe effectde @angular/core:

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

Agora defina um efeito que registre todas countas alterações:

protected count = signal(0);

private readonly countLog = effect(() => {
  console.log('Count changed:', this.count());
});

Sempre que countocorre uma mudança — seja por incremento, decremento ou reinicialização — esse efeito é executado e registra o novo valor no console. O Angular rastreia automaticamente a dependência de count().

Observe o padrão: o efeito é declarado como um private readonlycampo. Ele é privado porque nenhuma outra classe ou modelo precisa acessá-lo. Ele é somente leitura porque a referência ao efeito não deve ser reatribuída.

Efeitos versus sinais computados

É importante entender quando usar cada um:

Sinais computados:

• Representar estado derivado
• Retornar um valor
• Deve ser puro e sem efeitos colaterais.

Efeitos:

• Reagir às mudanças de estado
• Realizar efeitos colaterais
• Não retorne valores

Uma regra simples: se você está tentando calcular algo, use um sinal computado. Se você precisa fazer algo em resposta a uma mudança, use um efeito.

Casos de uso comuns para efeitos

Os efeitos são ótimos para:

• Registro e depuração — acompanhe as alterações de estado durante o desenvolvimento.
• Estado persistente — sincronizar valores para localStorageousessionStorage
• Integrações de terceiros — chamam APIs imperativas que não são sensíveis a sinais.
• Análises — acione eventos quando ocorrerem mudanças de estado específicas

Os efeitos não devem substituir a lógica de negócios, os valores derivados ou a modelagem de estado. Pense nos efeitos como a ponte entre o estado reativo e o mundo exterior.

Erros comuns com efeitos

Os efeitos são potentes, por isso algumas precauções:

• Não atualize sinais dentro de um efeito a menos que você realmente saiba o que está fazendo — isso pode levar a loops infinitos.
• Evite lógica complexa dentro dos efeitos — mantenha-os pequenos e focados em um único efeito colateral.
• Não use efeitos para lógica de renderização — para isso existem os templates e os sinais computados.

O uso incorreto de efeitos pode levar a comportamentos difíceis de depurar e fluxo de dados confuso. Em caso de dúvida, pergunte-se: “Estou calculando um valor ou executando um efeito colateral?” Se for o primeiro caso, use um sinal computado.

Ciclo de vida e limpeza do efeito

Os efeitos estão vinculados ao ciclo de vida do componente. Quando o componente é destruído, o Angular limpa automaticamente o efeito. Você não precisa cancelar a inscrição manualmente como faria com as inscrições do RxJS.

Isso torna os efeitos mais seguros e fáceis de gerenciar para o comportamento de componentes locais. Crie-os, deixe-os reagir e o Angular cuida do resto.

O componente completo

Aqui está o componente completo com os três tipos de sinal — sinais graváveis, sinais computados e efeitos:

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

@Component({
  selector: 'app-hello',
  imports: [],
  templateUrl: './hello.html',
  styleUrl: './hello.scss',
})
export class Hello {

  protected title = 'Welcome to Modern Angular!';

  protected isDisabled = false;

  protected onClick() {
    console.log('Button clicked');
    this.isDisabled = !this.isDisabled;
  }

  protected count = signal(0);

  protected doubleCount = computed(() => this.count() * 2);

  private readonly countLog = effect(() => {
    console.log('Count changed:', this.count());
  });

  protected increaseCounter() {
    this.count.update(value => value + 1);
  }

  protected decreaseCounter() {
    this.count.update(value => value - 1);
  }

  protected resetCounter() {
    this.count.set(0);
  }
}

Com esse componente, agora temos o modelo mental completo de sinais em ação:

• counté um sinal gravável que armazena estado
• doubleCounté um sinal computado que deriva um valor decount
• countLogé um efeito que registra todas countas alterações.

Código-fonte

O código-fonte completo do curso está disponível no GitHub: loiane/modern-angular .

Próximo passo

Agora que temos o modelo mental completo de sinais — sinais graváveis, sinais computados e efeitos — é hora de começar a construir funcionalidades reais. Na próxima lição, adicionaremos o Angular Material e configuraremos um componente de cabeçalho reutilizável como base para o nosso projeto.

Assista ao vídeo

Este post faz parte da série do Curso de Angular Moderno . Confira a página do curso para ver a lista completa de episódios.