Change Detection in Angular: Default vs OnPush

The Angular framework provides the best solution for developing robust, high-performance web applications. However, with the increase in application size and complexity, optimizing the performance of Angular apps becomes increasingly important. One area of Angular performance that is often overlooked or poorly understood is the method of detecting changes to an app. By understanding how to detect changes with Angular, as well as how to control Angular’s detection of changes, developers can significantly increase their app’s speed and user experience.

The purpose of this article is to explain the Angular Change Detection process and to illustrate the differences in operation when using the Default vs. OnPush Change Detection Strategies. This will assist developers in determining their preferred means of detecting changes within an Angular application.

Change Detection in Angular is a way for Angular applications to keep the UI synchronized with application data. When the data in an Angular application is changed, the Angular framework monitors the data and will automatically update the UI if needed.

What Is Change Detection in Angular?

Angular change detection runs multiple times during user interactions, such as HTTP responses, timers, and other asynchronous events.
This allows for a smooth and consistent user interface, but it can be a bottleneck from a performance standpoint in large applications if not handled correctly.

How Angular Change Detection Works

Angular maintains a component tree, where each Component has its own Change Detector. As a part of each change detection cycle, Angular goes through the entire component tree to see if there have been any changes to the data to which the component is bound to.

By default, Angular uses Zone.js which allows Angular to intercept async operations (e.g. click events, response from an API request or promise) and automatically trigger change detection cycles. While the way this works is easy to use, it means that Angular may carry out more checks on Components than necessary.

This is where Change Detection Strategies can be used.

Detection of changes by default

Detection of changes by default is angular’s default behaviour that runs on an event that occurs to detect changes in the application. With this default detection strategy, Angular runs checks of all components in the entire application for every event.

How Default Strategy Functions

When an event occurs, Angular will run the Change Detection for every Component in an application. Nevertheless, Angular will run change detection on all components in the tree hierarchy regardless of whether the data has changed or not. This could also help to guarantee the highest level of reliability and simplicity.

Benefits of Default Strategy

The use and understanding of the default strategy are very simple, and it works well with small-to-medium-sized applications. In addition, there is a lower chance of missing out when the UI is updated. Minimal effort is needed for development.

Limitations of Default Strategy

However, performance issues can become a major concern due to associated performance costs in large applications. Detecting change of unchanged components can lead to unnecessary re-checking of these components. This, in turn, will require more resources from the CPU and resulting in a decreased rendering speed.

Even though Default Strategy has an exceptionally high level of reliability, it is not considered as the most cost-effective for numerous complex or data-intensive applications.

OnPush Change Detection Strategy

Angular’s OnPush change detection strategy limits when Angular performs change detection in order to improve the performance of your application. Instead of checking all parts of the component, Angular will only update the component when it’s specifically required to do so.

How OnPush Strategy Works

• When the input reference of the component changes
• When an event happens in the component
• When an observable emits a new value
• When you explicitly trigger change detection manually

Advantages of OnPush strategy

• It allows for significant performance improvements
• It reduces the amount of times Angular performs unnecessary change detection cycles.
• It’s excellent for large-scale and enterprise-level applications.
• It promotes predictable and maintainable code.

Limitations of OnPush strategy

• Requires a clear understanding of immutability of data
• Has some additional learning curve
• While working with OnPush strategy developers must take care of state updates properly

OnPush strategy is most suitable for performance-intensive applications where scalability and efficiency are important.

Major Differences Between Default and OnPush

Default Strategy: A simple way of looking at things, the default strategy checks and updates the component tree when a change occurs for all components in your application.

OnPush Strategy: A more advanced way of looking at things, and focused on improving performance. OnPush checks only for updated components based on the data flowing through a component and updates only those components affected by that data.

Default Strategy Is Best Suited For:

• When you are creating small to medium size applications where data changes quickly, but in an unpredictable manner and performance is not a big concern;
• When you need to build quickly and keep things simple, and minimize the impact on performance;
• When the data flow through your application is relatively simple;
• When you are new to the component system or are working on a project where performance is less of an issue and maintainability is more important.

OnPush Strategy Is Best Suited For:

• When you are creating large, enterprise-level applications and are concerned about optimizing performance;
• When your application uses immutable data patterns;
• When you want to have more precise control over how a user interface (UI) updates;
• When your application is meant for a dashboard, real-time applications, and component-heavy user interfaces (UI).

Best Practices to Optimize Change Detection

• Using OnPush for reusable/high frequency components
• Making component state immutable
• Avoiding unneeded data bindings
• Using Observables for asynchronous data flows
• Dividing large components into multiple, narrow components

Using these methods allows Angular to perform faster and keep applications responsive.

How this Impacts Your Application Performance

Selecting the best change detection strategy has a significant impact on both rendering time and memory usage. OnPush eliminates unnecessary re-renders and results in improved scalability and interaction experience, especially on low-powered devices.

Performance optimization in Angular apps is no longer optional; it has become a requirement.

Conclusion

To make the most of the power of Angular and create high-performance and efficient applications, it is imperative to understand how to effectively use Change Detection.

While the Default change detection strategy provides simplicity and reliability, the OnPush change detection strategy offers the greatest performance if implemented correctly.

For small projects, Default change detection will usually suffice. For larger and more complex projects, or projects that require superior performance, using OnPush can increase render speed, scalability, and overall experience.

By choosing the right strategy, you will ensure your application remains responsive, maintainable and ready for the future.
Contact Us Today