¿Qué provoca una detección de cambios?
Angular necesita determinar cuándo debe volver a evaluar los componentes de una aplicación para comprobar si la interfaz debe actualizarse. Este proceso se conoce como Change Detection o detección de cambios.
La pregunta importante es: ¿qué provoca que Angular inicie este proceso?
En una aplicación pueden existir diferentes situaciones que hagan que Angular revise los componentes y sus plantillas. Entre ellas se encuentran los eventos, los cambios de referencias, los Observable, los signals y otros mecanismos relacionados con el funcionamiento del framework.
1. Eventos
Cuando ocurre un evento dentro de la aplicación, como un click, una interacción del usuario puede provocar que Angular ejecute una detección de cambios.
Por ejemplo:
button.addEventListener('click', () => {
// acción
});El evento puede formar parte de la cadena que lleva a Angular a revisar el estado de la aplicación.
2. Cambios en las referencias
Cuando utilizamos ChangeDetectionStrategy.OnPush, Angular utiliza reglas diferentes para determinar cuándo debe revisar un componente.
Uno de los casos importantes ocurre cuando cambia la referencia de un valor recibido por un componente. Por eso no es lo mismo modificar un objeto existente que asignar una nueva referencia.
3. Observable
Los Observable también pueden participar en la actualización de la interfaz. Cuando un componente recibe nuevos valores mediante mecanismos como async, Angular puede detectar que necesita actualizar la vista.
Esto permite trabajar con datos que cambian a lo largo del tiempo sin tener que actualizar manualmente cada parte de la interfaz.
4. Signals
Los signals introducen otro mecanismo para representar valores reactivos. Cuando un valor utilizado por una vista cambia, Angular puede identificar qué partes dependen de ese valor y actualizar lo necesario.
Esto hace que la relación entre el estado y la interfaz sea más explícita.
5. Zone.js
En aplicaciones que utilizan Zone.js, muchas operaciones asíncronas pueden quedar dentro de un contexto que Angular utiliza para saber que algo pudo haber cambiado.
Por eso acciones relacionadas con eventos, temporizadores o tareas asíncronas pueden terminar provocando una revisión de cambios.
Consideraciones
La detección de cambios no consiste simplemente en que Angular revise constantemente toda la aplicación. El framework utiliza diferentes mecanismos para determinar cuándo debe comprobar los componentes y qué partes necesitan ser actualizadas.
Comprender qué puede provocar una detección de cambios resulta especialmente importante al trabajar con OnPush, signals, Observable y ChangeDetectorRef, porque permite entender por qué una vista se actualiza, por qué puede no hacerlo cuando esperamos y cómo controlar mejor el rendimiento de una aplicación.
© Arturo Juárez Monroy