🔥 Série: 10 coisas que todo dev Angular deveria saber (mas normalmente não sabe) - 🚀 OnPush Change Detection Strategy: O turbo para sua aplicação

🤔 Por que você deveria se importar com isso?
Imagine sua aplicação Angular como um vigilante super ansioso 👮♂️ que fica verificando TUDO, o tempo TODO, mesmo quando nada mudou!
Isso é exatamente o que acontece com a estratégia DEFAULT do Angular:
😰 O Problema da Estratégia DEFAULT
A cada evento (click, scroll, timer, requisição HTTP), o Angular:
Verifica TODOS os componentes da árvore
Executa TODAS as expressões do template
Compara TODOS os valores anteriores
Mesmo se nada mudou! 🤦♂️
// Este método roda DEZENAS de vezes por segundo!
getRandomNumber() {
console.log('Executando...'); // Veja no console!
return Math.random();
}
Resultado: Sua app fica lenta conforme cresce 🐌
🎯 O que é OnPush Change Detection?
OnPush é como contratar um vigilante inteligente 🧠 que só age quando realmente precisa:
✅ Só verifica quando
@Input()
muda✅ Só verifica quando Observable emite via
async pipe
✅ Só verifica quando você pede (
markForCheck()
)✅ Só verifica eventos do próprio componente
💡 Como funciona na prática:
Estratégia DEFAULT (problemática):
@Component({
selector: 'app-user-list',
template: `
<div *ngFor="let user of users">
{{ user.name }} - {{ getRandomNumber() }}
</div>
`
})
export class UserListComponent {
users = [/* dados */];
getRandomNumber() {
return Math.random(); // 🔥 Roda constantemente!
}
}
Estratégia ONPUSH (inteligente):
@Component({
selector: 'app-user-list',
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<div *ngFor="let user of users">
{{ user.name }} - {{ user.lastLogin }}
</div>
`
})
export class UserListComponent {
@Input() users: User[] = [];
}
🎯 Quando usar OnPush?
✅ Use quando:
Componente recebe dados via
@Input()
Trabalha com dados imutáveis
Usa Observables com
async pipe
Quer performance máxima
❌ Evite quando:
Modifica propriedades do objeto diretamente
Usa eventos do DOM sem
ChangeDetectorRef
Tem lógica complexa de atualização interna
🏎️ Ganhos de Performance
Teste real: Lista com 1000 itens
Default: 60ms por cycle
OnPush: 5ms por cycle
Resultado: 92% mais rápido! 🚀
⚠️ Armadilhas Comuns (e como evitar)
1. Mutação direta de objetos:
// ❌ ERRO - OnPush não detecta
this.user.name = 'João';
// ✅ CORRETO - Criar novo objeto
this.user = { ...this.user, name: 'João' };
2. Esqueceu de marcar mudanças manuais:
constructor(private cdr: ChangeDetectorRef) {}
onClick() {
this.processData();
this.cdr.markForCheck(); // ✅ Força detecção
}
3. Array.push() não funciona:
// ❌ ERRO
this.items.push(newItem);
// ✅ CORRETO
this.items = [...this.items, newItem];
🎪 Dica PRO:
Use OnPush + Observables para o combo perfeito:
@Component({
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<div *ngFor="let user of users$ | async">
{{ user.name }}
</div>
`
})
export class UserListComponent {
users$ = this.userService.getUsers();
}
💡 Resumo:
OnPush = Performance + Previsibilidade + Menos bugs
Mas lembre-se: Com grandes poderes vêm grandes responsabilidades! 🕷️
💬 Você já usa OnPush nos seus projetos? Compartilhe sua experiência nos comentários!
🔄 Curta e compartilhe se foi útil!
#Angular #Frontend #Performance #JavaScript #WebDevelopment #OnPush #ChangeDetection
Subscribe to my newsletter
Read articles from Tiago Morais directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by
