Angular Change Detection Strategy: OnPush vs Default
Angular Change Detection Strategy: OnPush vs Default
Default strategy:
- Angular checks the entire component tree on every event
- Simple but can be slow for large apps
- Every click, timer, or HTTP response triggers a full check
OnPush strategy:
- Only checks when Input references change
- Much better performance for large component trees
- Requires immutable data patterns
- Works great with Observables and async pipe
How to enable OnPush:
@Component({
changeDetection: ChangeDetectionStrategy.OnPush
})
Tips for OnPush:
- Use the async pipe in templates for Observables
- Create new object references instead of mutating
- Use markForCheck() when needed for manual triggers
- Combine with trackBy in ngFor for list performance
OnPush can reduce change detection cycles by 80% or more in large apps. Are you using it?
Understanding change detection is key to building performant Angular apps.
Default strategy:
- Angular checks the entire component tree on every event
- Simple but can be slow for large apps
- Every click, timer, or HTTP response triggers a full check
OnPush strategy:
- Only checks when Input references change
- Much better performance for large component trees
- Requires immutable data patterns
- Works great with Observables and async pipe
How to enable OnPush:
@Component({
changeDetection: ChangeDetectionStrategy.OnPush
})
Tips for OnPush:
- Use the async pipe in templates for Observables
- Create new object references instead of mutating
- Use markForCheck() when needed for manual triggers
- Combine with trackBy in ngFor for list performance
OnPush can reduce change detection cycles by 80% or more in large apps. Are you using it?
OnPush change detection is one of the most impactful performance optimizations in Angular. Switching components to OnPush and using immutable data patterns can dramatically reduce unnecessary re-renders in large applications. It pairs perfectly with Observables and the async pipe, making your components both performant and reactive by design.
1 Guest(s)
1 Guest(s)