Como melhorar desempenho de uma aplicação Angular com OnPush

Change Detection é uma das principais funcionalidades do Angular, responsável por marcar os componentes quando um evento ocorre. Dessa forma, os componentes podem (caso implementem o evento) modificar a view.

Por padrão, o Angular trabalha de forma conservadora. Ou seja, quando ocorre um evento, todos os componentes são marcados para verificar se algo deve ser modificado nas views.

O desenho abaixo — sim, eu sou o artista plástico responsável pela obra de arte que você está preste a ver — ilustra o que acontece em uma aplicação Angular quando um evento ocorre.

change detection default

Por ter sido desenvolvido com foco em performance, o Angular consegue executar centenas de milhares de verificações por milissegundo. Mas, como não existe almoço grátis, isso acaba consumindo mais recursos do que é realmente necessário.

Para que isso não aconteça, podemos trabalhar com a estratégia do change detection no modo OnPush. Dessa forma, o componente passa a ser responsável por todos os eventos ocorridos nele mesmo, ignorando qualquer outro evento da aplicação.

Assim, quando um evento ocorre no componente, devemos utilizar o ChangeDetectorRef para marcar que houve uma mudança. Isso faz com que todo caminho até o componente seja marcado, para que os “pais” também sejam verificados e atualizados.

Veja a diferença.

change detection OnPush

Uma simples mudança, mas que traz bons ganhos em performance quando se trabalha com grandes aplicações.

Por fim, para facilitar o gerenciamento dos objetos dentro da aplicação, quando trabalharem com o change detection em OnPush, aconselho que os objetos sejam utilizados de forma imutável .

Objetos mutáveis trarão mais dores de cabeça do que solução quando trabalhamos dessa forma.