Change detection, zoneless and performance

How rendering is scheduled without Zone.js, what OnPush changes, how to profile a slow view, and how to keep a bundle inside its budget.

How change detection works without Zone.js

Zone.js patches every asynchronous browser API so Angular knows when something might have changed, then checks the whole tree. Zoneless removes the patch: Angular re-renders when a signal it is tracking is written, when an event handler inside a template runs, or when you explicitly ask it to. Nothing else triggers a check.

import { Component, signal, ChangeDetectorRef, inject } from '@angular/core';

@Component({
  selector: 'app-clock',
  template: `<p>{{ now() }}</p>`,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ClockComponent {
  private readonly cdr = inject(ChangeDetectorRef);
  readonly now = signal(new Date().toISOString());

  constructor() {
    // WRONG in a zoneless app: nothing tells Angular to re-render.
    setInterval(() => { this.now.set(new Date().toISOString()); }, 1000);

    // RIGHT: the signal write is the notification. This is the whole point.
    setInterval(() => {
      this.now.set(new Date().toISOString());
      // markForCheck() is only needed if you mutate non-signal state
      // that the template reads:
      // this.cdr.markForCheck();
    }, 1000);
  }
}

OnPush and view boundaries

<!-- Slice a hot list: only the changed row is re-rendered -->
@for (row of rows(); track row.id) {
  <app-row [row]="row" (select)="select(row.id)" />
}

import { Component, input, output, ChangeDetectionStrategy } from '@angular/core';

@Component({
  selector: 'app-row',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <td>{{ row().name }}</td>
    <td>{{ row().total }}</td>
    <button (click)="select.emit(row().id)">Open</button>
  `
})
export class RowComponent {
  // Signal inputs: writing a new row object is a notification.
  readonly row = input.required<Row>();
  readonly select = output<string>();
}

• A method call in a template runs on every change detection pass, including for rows that did not change. Move it to a computed and the cost disappears.
• OnPush plus mutable input objects is the classic combination that makes a view silently stop updating. Treat inputs as immutable, or use signals.
• Signal inputs notify Angular automatically, which is why they play better with OnPush than @Input properties ever did.

Profiling and budgets

# Production build with a stats file for bundle inspection
ng build --configuration production --stats-json
npx source-map-explorer dist/billing-portal/browser/*.js

# Check whether a dependency pulled in something unexpected
npx esbuild-visualizer --metadata dist/*/stats.json

# Find the components that dominate the initial bundle
grep -o 'chunk-[A-Z0-9]*.js' dist/billing-portal/browser/index.html

// Profiling in code: count how often a hot computed actually runs.
import { computed, signal } from '@angular/core';

const rows = signal<Row[]>([]);
let runs = 0;

export const visibleRows = computed(() => {
  runs++;
  if (runs % 100 === 0) console.debug('visibleRows computed runs:', runs);
  return rows().filter((row) => !row.hidden);
});

// If the count climbs with unrelated interactions, something is writing
// the whole array instead of updating one item:
// rows.set([...rows()]);                 // everything recomputes
// rows.update(list => list.map(r => r.id === id ? {...r, hidden: true} : r));  // fine

The cheapest performance work is almost always structural: fewer components rendered, fewer template function calls, fewer eager imports. Micro-optimising a change detection pass that should not be running in the first place is a waste of effort.

FAQ

Related

Template control flow, pipes and deferred views Signals, computed values and effects

Last refreshed 2026-09-18.