Angular Academy · Aula

Pipes puros versus impuros

Entenda o comportamento de detecção de alterações dos pipes.

Aula 4 de 413 etapas

Pipes puros versus impuros é uma aula grátis de Angular Academy no CoddyKit. Esta é a aula 4 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.

Pipes puros por padrão

Todo pipe é puro por padrão. Um pipe puro só é executado novamente quando o valor de entrada ou os argumentos mudam por referência.

Por que os pipes puros são rápidos

O Angular ignora a chamada de um pipe puro durante a detecção de alterações se a referência da entrada não mudou. Isso torna os pipes puros eficientes.

@Pipe({ name: "exclaim", standalone: true })
export class ExclaimPipe implements PipeTransform {
  transform(value: string) { return value + "!"; }
}
// pure: only re-runs when value changes

Alterações de referência versus valor

Os pipes puros detectam alterações de referência. Alterar um array no próprio lugar NÃO aciona um pipe puro, porque a referência do array continua a mesma.

// this will NOT re-run a pure pipe:
this.items.push("new");

// this WILL, new reference:
this.items = [...this.items, "new"];

Declarando um pipe impuro

Defina pure: false no decorador @Pipe para tornar um pipe impuro. Um pipe impuro é executado em cada ciclo de detecção de alterações.

@Pipe({ name: "filter", standalone: true, pure: false })
export class FilterPipe implements PipeTransform {
  transform(items: string[], term: string) {
    return items.filter(i => i.includes(term));
  }
}

Quando usar pipes impuros

Use pipes impuros quando a transformação depender de dados mutáveis, como ao filtrar um array que você altera no próprio lugar, ou de valores que mudam sem uma nova referência.

O custo dos pipes impuros

Os pipes impuros são executados com muita frequência, em cada ciclo de detecção de alterações. Uma lógica pesada dentro deles pode prejudicar o desempenho; por isso, mantenha-os leves.

O pipe async é impuro

O pipe integrado async é impuro. Ele se inscreve em um Observable ou Promise e atualiza a visualização à medida que novos valores chegam.

<p>{{ data$ | async }}</p>

// component
data$ = this.http.get("/api/data");

O pipe async cancela a inscrição automaticamente

Um grande benefício do pipe async é cancelar automaticamente a inscrição quando o componente é destruído, evitando vazamentos de memória.

@Component({
  template: "<p>{{ count$ | async }}</p>"
})
export class DemoComponent {
  count$ = interval(1000);
}

Evite mutações com pipes puros

Para manter os pipes puros funcionando com coleções, trate os dados como imutáveis: crie novos arrays e objetos em vez de alterar os existentes.

// good for pure pipes:
this.users = this.users.concat(newUser);
this.user = { ...this.user, name: "Ada" };

Escolhendo entre puro e impuro

Prefira pipes puros para obter um comportamento previsível e rápido. Use pipes impuros apenas quando realmente precisar reagir a mutações. Muitas vezes, uma reformulação com dados imutáveis elimina completamente a necessidade de pipes impuros.

Boas práticas para pipes impuros

Se precisar usar um pipe impuro, armazene os resultados em cache para não recalculá-los quando as entradas não mudarem.

@Pipe({ name: "memoFilter", standalone: true, pure: false })
export class MemoFilterPipe implements PipeTransform {
  private last = "";
  private cache: string[] = [];
  transform(items: string[], term: string) {
    if (term === this.last) return this.cache;
    this.last = term;
    this.cache = items.filter(i => i.includes(term));
    return this.cache;
  }
}

Verificação rápida

Teste sua compreensão sobre pipes puros e impuros.

Responda na aula interativa

Recapitulação

Os pipes puros são executados apenas quando há alterações de referência e são rápidos; os pipes impuros (pure: false) são executados em todos os ciclos e são adequados para dados mutáveis. O pipe async é impuro e cancela a inscrição automaticamente.

Prefira dados imutáveis para manter os pipes puros eficientes.

Grátis para começar

Aprenda HTML com um tutor de IA — grátis

Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.

Cursos: 38
Aulas: 144

Começar a aprender grátis Ver o curso completo

Perguntas Frequentes

A aula “Pipes puros versus impuros” é grátis?

Sim — o texto completo de “Pipes puros versus impuros” é 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 “Pipes puros versus impuros”?

Entenda o comportamento de detecção de alterações dos pipes. 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 4 de 4.

Quanto tempo leva a aula “Pipes puros versus impuros”?

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