Angular Change Detection Explained: OnPush vs Default Strategy, Performance, and Best Practices
Learn the difference between Angular change detection strategies: Default vs OnPush. Understand how each strategy works, when Angular runs change detection, how OnPush improves performance, common pitfalls with immutability and async data, and best practices for faster Angular apps.
Angular Change Detection Explained: OnPush vs Default Strategy, Performance, and Best Practices
Wireframe overlay treatment: cyan-tinted annotation over matte navy field.
Rating: 4.1 / 5
Signal strength measured across clarity, contrast, and geometry consistency.

Angular Change Detection Explained: OnPush vs Default Strategy, Performance, and Best Practices

Author: Published:

Getting into OnPush vs Default

Angular change detection is one of those things that feels invisible until it suddenly hurts. Like you click a button and the UI updates, cool, no questions. Then one day it does not update, or it updates way too much, and now you are staring at Default and OnPush like they are two different worlds.

So here is what I’m trying to pin down. With Default, Angular keeps checking a lot. It runs change detection often, and it does not need much of a reason. That makes stuff “just work” but it can get heavy when the app grows. With OnPush, Angular gets picky. It wants clear signals before it re-renders a component, like an input reference changed, an event happened in that component, or something async pushed a new value.

The tricky part is the word reference. If an object changes inside but the reference stays the same, OnPush might not notice. That’s where immutability starts mattering, even if nobody planned to talk about immutability today.

A quick wrap up

If Default feels like “check everything all the time”, OnPush feels like “prove it changed”. Once that clicks, triggers make more sense, async pipes feel safer, and the common gotchas stop being random surprises.

Prev
https://zeptobook.com/Angular Performance Optimization Tips That Work: Proven Techniques to Speed Up Your App
Next
Next
Contacts: Request review
COMMENTS
No comments yet. This block is reserved for a future threaded system.
Return to top

Angular Change Detection Explained: OnPush vs Default Strategy, Performance, and Best Practices

Learn how to retry failed HTTP requests in Angular using an HttpInterceptor. This guide shows how to implement automatic retries with RxJS (retry, retryWhen), add exponential backoff and max retry limits, handle network and 5xx errors safely, and avoid retrying non-idempotent requests.
How to Retry Failed HTTP Requests in Angular with an HTTP Interceptor (RxJS retryWhen, Exponential Backoff, and Error Handling) Learn how to retry failed HTTP requests in Angular using an HttpInterceptor. This guide shows how to implement automatic retries with RxJS (retry, retryWhen), add exponential backoff and max retry limits, handle network and 5xx errors safely, and avoid retrying non-idempotent requests.
Listing of ZeptoBook reactjs articles including creating React apps with webpack and babel Gatsby static site generator blogs and first React app guide
reactjs Listing of ZeptoBook reactjs articles including creating React apps with webpack and babel Gatsby static site generator blogs and first React app guide
Destructuring in JavaScript lets you unpack values from arrays and objects into variables using concise syntax. It simplifies accessing nested data and function parameters and keeps code shorter and cleaner.
Destructuring Destructuring in JavaScript lets you unpack values from arrays and objects into variables using concise syntax. It simplifies accessing nested data and function parameters and keeps code shorter and cleaner.