Angular's OnPush: Faster Apps by Doing Less

Why it exists

By default, Angular checks every component for changes after any browser event, timer, or data fetch. In large applications, this constant checking from the top of the component tree down can become a major performance bottleneck. ChangeDetectionStrategy.OnPush was created to give developers a way to opt out of this constant checking and define stricter, more performant rules for updates.

The mental model

Think of OnPush as changing a component's update subscription from "check me constantly" to "notify me only when it's important." Instead of Angular's default strategy of actively polling every component for changes, OnPush components are passive. They are considered "clean" and are skipped during the change detection cycle until a specific event explicitly marks them as "dirty" and in need of a check.

How it works

A component using OnPush will only be checked and re-rendered if one of four conditions is met. First, one of its @Input() properties receives a new object or value reference. Second, an event handler is triggered within that component or one of its children (like a button click). Third, an observable bound to its template via the async pipe emits a new value. Fourth, you manually tell Angular to check the component using ChangeDetectorRef.markForCheck().

When to use it

Use OnPush for any component whose state is primarily determined by its inputs, especially "presentational" or "dumb" components. It is the standard and most effective strategy when using state management libraries like NgRx or data services that provide immutable state objects. The goal should be to use OnPush as the default for all new components to build performant apps from the start.

When not to use it

Avoid OnPush if your component's rendering depends on a shared, mutable service or some other global state that is not passed in via @Input or an observable with an async pipe. In such cases, the component has no signal that the external data has changed, and its view will become stale unless you manually inject ChangeDetectorRef to trigger updates, which can become complex.

One canonical example

Consider a UserProfile component with an @Input() user property. If you pass it a user object and then another component mutates a property (user.name = 'new name'), OnPush will not update the UI because the object reference for user has not changed. The correct way to trigger an update is to pass a completely new object, for example: this.user = { ...this.user, name: 'new name' };. This new reference is the signal OnPush needs to run change detection.