Como funciona a detecção de mudanças no Angular e o que o OnPush faz?

Question

Accepted Answer

**Change detection** é como o Angular mantém o DOM sincronizado com os dados do componente — após qualquer evento potencialmente mudador de estado, ele verifica os componentes e atualiza a view onde os dados mudaram. Por padrão, essa verificação é ampla; **`OnPush`** a restringe para melhor desempenho.

## Como a detecção de mudanças padrão funciona

```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.
```

Por padrão (estratégia `Default`), o Angular reverifica **todos os componentes** em cada evento — correto, mas potencialmente desperdiçador em árvores grandes.

## OnPush — pule componentes que não podem ter mudado

```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;
}
```

Com `OnPush`, o Angular **pula** a verificação deste componente a menos que um destes aconteça:

```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()
```

Isso pode reduzir drasticamente o trabalho em árvores grandes — o Angular ignora subárvores inteiras que sabe que não podem ter mudado.

## A grande armadilha: imutabilidade obrigatória

```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` depende de **mudanças de referência** para inputs, então você deve atualizar o estado imutavelmente (novos objetos/arrays). Mutar no lugar é o bug clássico do OnPush — a view não atualizará.

## Controle manual

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

## O futuro: signals + zoneless

Os sinais permitem atualizações ainda mais precisas e **granulares** (apenas as views que leem um sinal alterado), apontando para remover completamente o Zone.js.

## Por que isso importa

A detecção de mudanças é central para o desempenho do Angular.

Compreender que a estratégia padrão verifica toda a árvore — e que `OnPush` + dados imutáveis limitam verificações apenas aos componentes cujos inputs realmente mudaram — é a principal alavanca para otimizar aplicações grandes.

O requisito de imutabilidade é uma fonte frequente de bugs "por que minha view não está atualizando?", e os sinais representam para onde o Angular está indo para reatividade ainda mais granular e eficiente.