TrackBy no Angular

angular — trackBy 1 / 4

TrackBy no
Angular

O detalhe que destrói a performance
de listas silenciosamente

❌ Sem trackBy

Item A

Item B

Item C

↓ API retorna novo array — mesmo conteúdo

Item A ♻

Item B ♻

Item C ♻

destruído e recriado

reutilizado (com trackBy)

O Angular compara referências de memória. Um array novo da API é um objeto novo — mesmo JSON idêntico, para o Angular tudo mudou.

angular — trackBy 2 / 4

O que você
perde sem
trackBy

Estado local destruído a cada resposta HTTP

⚠️ Tudo isso some ao recriar o DOM

☑️

Checkboxes desmarcados Usuário marcou 5 itens — após poll, voltam ao estado inicial.

📋

Dropdowns fecham sozinhos Select aberto é destruído com o DOM e fecha sem aviso.

✏️

Inputs perdem foco e valor Texto digitado some quando o nó é recriado.

angular — trackBy 3 / 4

Como
corrigir

*ngFor legado e @for moderno

*ngFor — legado

<!-- ❌ sem track — recria tudo -->
<li *ngFor="let item of items">...</li>

<!-- ✅ com trackBy -->
<li *ngFor="let item of items;
       trackBy: trackById">...</li>

✨ Angular 17+ — @for (track obrigatório)

@for (item of items; track item.id) {
  <li>{{ item.name }}</li>
}

⚡ Com Signal Inputs, o @for rastreia dependências de forma granular — performance máxima.

angular — trackBy 4 / 4

Impacto real —
200 itens,
1 muda

Re-renders por requisição HTTP

🐢 Sem trackBy

200 re-renders

🚀 Com trackBy

1 re-render

⚠️

No @for do Angular 17+, track é obrigatório em nível de compilador. Você literalmente não compila sem ele.

Já viu checkboxes desmarcando sozinhos?
Esse era o trackBy faltando.
Comenta aqui embaixo 👇