OnPush vs Default Change Detection Strategy in Angular

Both OnPush and Default are change detection strategies in Angular, but they differ in their
approach and impact on performance:

Default Strategy:

● Concept: Also known as CheckAlways, this strategy checks all components and
directives in the component tree for changes every time an event occurs or data
changes anywhere in the application.
● Benefits:
○ Easier to implement and understand.
○ No need to explicitly manage change detection.
● Drawbacks:
○ Less performant for large component trees or frequently changing data.
○ Can lead to unnecessary re-renders and reduced responsiveness.
● Use cases:
○ Simple applications with small component trees.
○ Components with predictable data changes.

OnPush Strategy:

● Concept: This strategy tells Angular to skip checking a component for changes unless
it explicitly requests an update. This can be achieved by:
○ Receiving an input change.
○ Triggering an event within the component.
○ Explicitly calling the detectChanges method.
● Benefits:
○ Significantly improves performance for large component trees and frequently
changing data.
○ Reduces memory usage.
○ Makes code more modular and easier to reason about.
● Drawbacks:
○ Requires a more disciplined approach to data management within the
component.
○ May lead to stale data being displayed if proper change notification mechanisms
are not implemented.
○ Can be challenging to debug issues related to missing updates.
● Use cases:
○ Complex applications with large component trees.
○ Components with frequent data changes.
○ Components that need to be highly performant.

Here's a table summarizing the key differences:

 Feature Default Strategy OnPush Strategy

Concept Checks all components Only checks components

for changes every time that explicitly request
updates

Benefits Easier to implement, no Improved performance,

need to manage change reduced memory usage,
detection modular code

Drawbacks Less performant for large Requires disciplined data

component trees, management, may lead
unnecessary re-renders to stale data, challenging
debugging

Use cases Simple applications, Complex applications,

small component trees, large component trees,
predictable data changes frequent data changes,
performance-critical
components

Choosing the Right Strategy:

The best strategy for your application depends on its size, complexity, and performance
requirements. Here are some general guidelines:

● Use the default strategy for small and simple applications with predictable data
changes.
● Use the OnPush strategy for complex applications with large component trees and
frequent data changes.
● Consider using a combination of both strategies:
○ Use OnPush for components that need high performance.
 ○ Use the default strategy for simpler components that don't have significant impact
on performance.

Remember:

● Using OnPush effectively requires careful data management within your components.
● Always provide proper change notification mechanisms for OnPush components to
avoid stale data issues.
● Experiment with both strategies to find the best balance between performance and
code maintainability for your specific needs.