¿Cómo funciona la detección de cambios en Angular y qué hace OnPush?

Question

Accepted Answer

**La detección de cambios** es cómo Angular mantiene el DOM sincronizado con los datos del componente — después de cualquier evento potencialmente que cambie estado, verifica los componentes y actualiza la vista donde los datos han cambiado. De forma predeterminada, esta verificación es amplia; **`OnPush`** la reduce para mejorar el rendimiento.

## Cómo funciona la detección de cambios predeterminada

```text
An async event fires (click, HTTP response, setTimeout) →
Zone.js notifies Angular → Angular checks the ENTIRE component tree
top-to-bottom → updates any bindings whose values changed.
```

De forma predeterminada (estrategia `Default`), Angular revalida **cada componente** en cada evento — correcto, pero potencialmente derrochador en árboles grandes.

## OnPush — omitir componentes que no pueden haber cambiado

```ts
import { ChangeDetectionStrategy, Component } from "@angular/core";

@Component({
  selector: "app-user",
  changeDetection: ChangeDetectionStrategy.OnPush, // opt in
  template: `{{ user.name }}`,
})
export class UserComponent {
  @Input() user!: User;
}
```

Con `OnPush`, Angular **omite** la verificación de este componente a menos que ocurra uno de estos:

```text
1. An @Input REFERENCE changes (new object, not a mutation of the same one)
2. An event fires from within the component (click, etc.)
3. An Observable bound via the async pipe emits
4. You manually call markForCheck()
```

Esto puede reducir dramáticamente el trabajo en árboles grandes — Angular ignora subárboles completos que sabe que no pueden haber cambiado.

## El problema clave: se requiere inmutabilidad

```ts
// ❌ mutating doesn't change the reference → OnPush won't detect it
this.user.name = "Bob";

// ✅ create a NEW object → reference changes → OnPush updates
this.user = { ...this.user, name: "Bob" };
```

`OnPush` se basa en **cambios de referencia** para las entradas, por lo que debe actualizar el estado de forma inmutable (objetos/matrices nuevos). La mutación en el lugar es el error clásico de OnPush — la vista no se actualizará.

## Control manual

```ts
constructor(private cdr: ChangeDetectorRef) {}
this.cdr.markForCheck();   // mark this component for the next check
this.cdr.detectChanges();   // run change detection now
```

## El futuro: signals + zoneless

Signals habilitan actualizaciones aún más precisas, **de grano fino** (solo vistas que leen una señal cambiada), apuntando hacia la eliminación completa de Zone.js.

## Por qué es importante

La detección de cambios es fundamental para el rendimiento de Angular.

Comprender que la estrategia predeterminada verifica todo el árbol — y que `OnPush` + datos inmutables limita las verificaciones a componentes cuyos datos de entrada realmente han cambiado — es la principal palanca para optimizar aplicaciones grandes.

El requisito de inmutabilidad es una fuente frecuente de errores "¿por qué no se actualiza mi vista?", y las signals representan hacia dónde se dirige Angular para lograr una reactividad aún más granular y eficiente.