A detecção de alterações é um aspecto fundamental do Angular, responsável por identificar e atualizar partes do DOM que foram alteradas em resposta a modificações de dados ou interações do usuário. Esse processo garante que a IU permaneça consistente com os dados subjacentes, melhorando a experiência do usuário e o desempenho do aplicativo.

O papel do Zone.js

Historicamente, Angular confiou no Zone.js para seu mecanismo de detecção de alterações. Zone.js é uma biblioteca JavaScript que intercepta operações assíncronas, permitindo que Angular monitore alterações e acione atualizações de acordo. No entanto, a inclusão de Zone.js pode adicionar sobrecarga ao aplicativo, especialmente em cenários com atividades assíncronas frequentes.

Estratégias de detecção de alterações

Angular fornece duas estratégias principais de detecção de alterações:

• Padrão: A detecção de alterações é acionada após cada gancho do ciclo de vida, como ngOnInit ou ngAfterViewInit. Essa estratégia é simples, mas pode levar a atualizações desnecessárias do DOM, especialmente em aplicativos grandes.

@Component({
  selector: 'app-my-component',
  template: `
    
{{ message }}
  `
})
export class MyComponent {
  message = 'Hello, world!';
}

Essa estratégia é mais fácil de implementar, pois o Angular lida automaticamente com a maior parte da lógica de detecção de alterações.
O maior desafio dessa estratégia de detecção de alterações foi que ela levou a atualizações desnecessárias do DOM, o que se torna crítico para aplicativos grandes.

• OnPush: A detecção de alterações é acionada somente quando as propriedades de entrada ou os observáveis ​​assíncronos são alterados. Essa estratégia tem melhor desempenho para componentes complexos com atualizações de dados frequentes, mas requer mais gerenciamento manual.

@Component({
  selector: 'app-my-component',
  template: `
    
{{ message }}
  `,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class MyComponent {
  message = 'Hello, world!';
} 

Embora a estratégia de detecção de alterações onPush minimizasse manipulações desnecessárias de DOM, o maior desafio da estratégia de alterações onPush era que os desenvolvedores tinham que fazer mais gerenciamento manual e acionar alterações manualmente. Eles tiveram que lidar explicitamente com a detecção de alterações com changeDetectorRef.detectChanges() em determinados cenários, como quando os dados mudam indiretamente ou ao usar objetos mutáveis.

Angular 18 e detecção de alterações híbridas: uma abordagem sem zona

Para enfrentar os desafios associados ao Zone.js, Angular 18 introduziu um recurso experimental conhecido como Hybrid Change Detection. Esta abordagem visa eliminar totalmente o Zone.js, usando um novo mecanismo de detecção de alterações para detectar alterações e manipular o DOM.

Habilitando a detecção de alterações híbridas:

Para ativar a detecção de alterações híbridas, você pode usar o seguinte código:

bootstrapApplication(RootCmp,
{ providers: [provideExperimentalZonelessChangeDetection()] 
}
);

Isso acionará a detecção de alterações nos seguintes cenários:

• Um sinal é atualizado.
• changeDetectorRef.markForCheck() é chamado.
• Um observável inscrito no AsyncPipe recebe um novo valor.
• Um componente é anexado ou desconectado.
• Uma entrada está definida.

Depois que a detecção de alterações híbridas estiver habilitada, você poderá remover Zone.js com segurança dos polyfills do seu aplicativo.

 "polyfills": [
              "zone.js" //remove this line
            ],

Benefícios da detecção híbrida de alterações

• Melhor desempenho: A eliminação do Zone.js reduz a sobrecarga, levando a um melhor desempenho, especialmente em aplicativos com inúmeras operações assíncronas.

• Experiência aprimorada do desenvolvedor: a remoção da detecção manual de alterações simplifica o desenvolvimento e reduz a probabilidade de erros.

• Tamanho menor do aplicativo: Zone.js normalmente adiciona cerca de 13 KB ao tamanho do aplicativo. Removê-lo pode resultar em um pacote menor.