Understanding the OnPush Change Detection Strategy in Angular

Описание: Dive deep into the `OnPush` change detection strategy in Angular. Explore how it works across parent, child, and grandchild components and learn how to manage state updates effectively.
---
This video is based on the question https://stackoverflow.com/q/73239547/ asked by the user 'Dmitry Dagadin' ( https://stackoverflow.com/u/14850208/ ) and on the answer https://stackoverflow.com/a/73255197/ provided by the user 'slim' ( https://stackoverflow.com/u/18994679/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Principe of Angular OnPush + Change detection work

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Understanding the OnPush Change Detection Strategy in Angular

In Angular, optimizing performance and managing states effectively is crucial for building responsive applications. One of the powerful features Angular offers is its change detection strategy, specifically the OnPush strategy. However, many developers find it challenging to grasp how it works, especially when dealing with complex component hierarchies. In this guide, we will break down the OnPush change detection strategy and examine how it influences parent-child component interactions using a practical example.

The Problem

Imagine you have a component hierarchy with three components: a parent, a child, and a grandchild (child-child). The parent component displays a property, and there are several timeouts that update properties in both the child and grandchild components. Understanding how these components react to state changes can be tricky, particularly with the OnPush strategy.

Here’s a simplified version of what our components look like:

Parent Component: Updates its property every 2 seconds.

Child Component: Updates its property every 10 seconds and marks itself for check.

Child-Child Component: Updates its property every 3 seconds.

[[See Video to Reveal this Text or Code Snippet]]

The Solution Explained

What Is OnPush Change Detection?

The OnPush change detection strategy allows Angular to check a component, and its children, only when certain conditions are met:

Input properties change.

An event originated from the component or its children is triggered.

The markForCheck() or detectChanges() methods are called on the component's ChangeDetectorRef.

How markForCheck() Works

Marking for Check: When you call markForCheck() in the child component, it marks itself and all of its OnPush ancestors (including the parent) for checking.

Limitations: However, it does not mark the grandchild component for checking since it does not have a direct parent-child relationship with the grandchild (child-child).

Key Takeaway: If markForCheck() is called in the child component, only the child and parent get checked.

How detectChanges() Operates

Immediate Change Detection: When you use detectChanges(), it checks the current component (the child) and all its direct children. However, similar to markForCheck(), the check will respect the change detection strategies of the grandchild.

Outcome: This means if the grandchild component is set to OnPush, it will not rerender even if the parent and child do.

Why Doesn’t Child-Child Rerender?

In both scenarios (markForCheck() and detectChanges()), the child-child component does not rerender because:

It is marked with OnPush, meaning it does not check unless explicitly invoked by its parent.

Changes in the parent and child components do not affect its state directly unless their input properties change.

Conclusion

Understanding the OnPush change detection strategy in Angular allows for more efficient component updates and better performance. In a nutshell:

markForCheck(): Marks the component and its OnPush ancestors for updating.

detectChanges(): Triggers immediate checks but respects child component strategies.

To effectively utilize the OnPush strategy, developers should be mindful of their component relationships and the updates occurring within their application. This knowledge can lead not only to optimized performance but also to a better understanding of Angular’s mechanics.

Ready to take your Angular skills to the next level? Experiment with these concepts in your own projects and see the impact on performance firsthand!