Angular Academy · Aula

Detecção de alterações com OnPush

Reduza as verificações com a estratégia OnPush.

Detecção de alterações com OnPush é 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 problema de desempenho

A estratégia padrão verifica cada componente a cada ciclo. Em aplicativos grandes, isso se acumula. OnPush instrui o Angular a ignorar um componente, a menos que algo relevante tenha mudado.

Ativando o OnPush

Defina a opção changeDetection no componente.

@Component({
  selector: 'app-user',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: '{{ user().name }}'
})
export class UserComponent {}

Quando o OnPush verifica novamente

Um componente com OnPush só é verificado quando: uma referência de @Input muda, um evento é disparado pelo próprio modelo, um observável associado com async emite um valor ou você chama markForCheck().

Igualdade de referências de entrada

O OnPush compara as referências de entrada usando Object.is. Alterar um objeto diretamente não dispara uma nova verificação; você precisa passar uma nova referência.

// Mutation: ignored by OnPush
this.user.name = 'New';
// New reference: detected
this.user = { ...this.user, name: 'New' };

A imutabilidade ajuda

O OnPush combina naturalmente com dados imutáveis. Sempre crie novos objetos ou arrays em vez de alterá-los, para que as verificações de referência detectem as mudanças de forma confiável.

this.items = [...this.items, newItem];

Os eventos continuam funcionando

Os eventos do próprio modelo do componente (cliques, entradas) marcam-no automaticamente para verificação, portanto a interatividade local funciona sem código adicional.

<button (click)="count.set(count() + 1)">+</button>

O pipe async

O pipe async chama markForCheck() quando o observável emite um valor, fazendo o OnPush funcionar perfeitamente com fluxos de dados.

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

markForCheck

Quando você atualiza o estado fora dos acionadores normais, chame markForCheck() para agendar o componente (e seus ancestrais) para o próximo ciclo.

private cdr = inject(ChangeDetectorRef);
this.cdr.markForCheck();

Signals e OnPush

Signals se integram ao OnPush: ler um signal no modelo registra uma dependência, e atualizá-lo marca automaticamente o componente para verificação, sem necessidade de chamadas manuais.

count = signal(0);
increment() { this.count.update(c => c + 1); }

Propagação do OnPush

Quando é marcado, o componente e todos os seus ancestrais até a raiz são sinalizados, para que o caminho seja verificado. Os filhos são verificados normalmente abaixo dele.

Boa prática

Use o OnPush como padrão para novos componentes. Combinado com signals ou entradas imutáveis, ele reduz drasticamente o trabalho desnecessário.

Verificação rápida

Teste sua compreensão do OnPush.

Recapitulação

Você aprendeu que ChangeDetectionStrategy.OnPush ignora verificações, a menos que uma referência de entrada mude, um evento do modelo seja disparado, um pipe async emita um valor ou você chame markForCheck(). Ele funciona melhor com dados imutáveis e signals.

Perguntas Frequentes

A aula “Detecção de alterações com OnPush” é grátis?

Sim — o texto completo de “Detecção de alterações com OnPush” é 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 “Detecção de alterações com OnPush”?

Reduza as verificações com a estratégia OnPush. 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 “Detecção de alterações com OnPush”?

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