La detección de cambios es un aspecto fundamental de Angular, responsable de identificar y actualizar partes del DOM que han cambiado en respuesta a modificaciones de datos o interacciones del usuario. Este proceso garantiza que la interfaz de usuario siga siendo coherente con los datos subyacentes, lo que mejora la experiencia del usuario y el rendimiento de la aplicación.

El papel de Zone.js

Históricamente, Angular ha confiado en Zone.js para su mecanismo de detección de cambios. Zone.js es una biblioteca de JavaScript que intercepta operaciones asincrónicas, lo que permite a Angular monitorear los cambios y activar actualizaciones en consecuencia. Sin embargo, la inclusión de Zone.js puede agregar una sobrecarga a la aplicación, particularmente en escenarios con actividades asincrónicas frecuentes.

Estrategias de detección de cambios

Angular proporciona dos estrategias principales de detección de cambios:

• Predeterminado: La detección de cambios se activa después de cada enlace del ciclo de vida, como ngOnInit o ngAfterViewInit. Esta estrategia es sencilla pero puede generar actualizaciones DOM innecesarias, especialmente en aplicaciones grandes.

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

Esta estrategia es más fácil de implementar, ya que Angular maneja la mayor parte de la lógica de detección de cambios automáticamente.
El mayor desafío con esta estrategia de detección de cambios fue que generó actualizaciones DOM innecesarias, lo que resulta crítico para aplicaciones grandes.

• OnPush: La detección de cambios se activa solo cuando cambian las propiedades de entrada o los observables asincrónicos. Esta estrategia tiene más rendimiento para componentes complejos con actualizaciones de datos frecuentes, pero requiere una gestión más manual.

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

Si bien la estrategia de detección de cambios onPush minimizó las manipulaciones DOM innecesarias, el mayor desafío con la estrategia de cambios onPush fue que los desarrolladores tuvieron que realizar más gestión manual y activar cambios manualmente. Tuvieron que manejar la detección de cambios explícitamente con changeDetectorRef.detectChanges() en ciertos escenarios, como cuando los datos cambian indirectamente o cuando se usan objetos mutables.

Angular 18 y detección de cambios híbridos: un enfoque sin zonas

Para abordar los desafíos asociados con Zone.js, Angular 18 introdujo una característica experimental conocida como Detección de cambios híbridos. Este enfoque tiene como objetivo eliminar Zone.js por completo, utilizando un nuevo mecanismo de detección de cambios para detectar cambios y manipular el DOM.

Habilitación de la detección de cambios híbridos:

Para habilitar la detección de cambios híbridos, puede utilizar el siguiente código:

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

Esto activará la detección de cambios en los siguientes escenarios:

• Se actualiza una señal.
• se llama a changeDetectorRef.markForCheck().
• Un observable suscrito con AsyncPipe recibe un nuevo valor.
• Un componente se adjunta o desconecta.
• Se establece una entrada.

Una vez habilitada la detección de cambios híbridos, puedes eliminar Zone.js de forma segura de los polyfills de tu aplicación.

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

Beneficios de la detección de cambios híbrida

• Rendimiento mejorado: La eliminación de Zone.js reduce la sobrecarga, lo que conduce a un mejor rendimiento, especialmente en aplicaciones con numerosas operaciones asincrónicas.

• Experiencia de desarrollador mejorada: La eliminación de la detección manual de cambios simplifica el desarrollo y reduce la probabilidad de errores.

• Tamaño de aplicación más pequeño: Zone.js normalmente agrega alrededor de 13 KB al tamaño de la aplicación. Quitarlo puede generar un paquete más pequeño.