Change Detection Strategy in Angular.

OnPush is hard in Angular.

Introduction:

Angular’s change detection strategy plays a crucial role in ensuring that our components render and update efficiently. This mechanism detects changes in our components and determines when a re-rendering is necessary. In Angular, there are two primary types of change detection strategies: OnPush (CheckOnce) and Default (CheckAlways).

Default (CheckAlways):

In this mode, change detection is automatic and continues until explicitly deactivated using cdr.detach(). It ensures that any change in the application triggers a check and update in the component tree.

OnPush (CheckOnce):

This strategy checks the component once and requires manual or external triggers for subsequent checks. It can be explicitly invoked with markForCheck() which makes component dirty .If a component is not dirty, Angular will skip the change detection for it.OnPush is particularly beneficial in large projects where performance is a concern, as it avoids unnecessary checks of child components unrelated to the change in the parent component.

Scenarios for Change Detection in Components:

Without manually using markForCheck(), the following scenarios will trigger change detection in child components:

• Input Property Changes: Triggered if the reference of the input property changes, not the input itself.
• Events Originating from the Component or its Children: Actions like button clicks will run change detection.
• Observable Emits New Value: Change detection occurs when observables emit new values.
• JavaScript Timers: setTimeout or setInterval can update the component's bindings or state, triggering change detection.

ChangeDetectorRef Functions:

ChangeDetectorRef offers several methods that allow developers to interact with the change detection mechanism:

• markForCheck(): Marks the component and its ancestors for the next change detection cycle, signaling Angular to check for updates.
• detach(): Detaches the component from Angular's change detection tree, optimizing performance when updates aren't needed.
• detectChanges(): Immediately triggers change detection for the component and its children, useful for updates outside of Angular's normal cycle.
• reattach(): Reattaches a previously detached component, resuming normal change detection checks and updates.

Conclusion:

Angular’s change detection strategies, particularly OnPush, offer significant performance benefits for large-scale applications by minimizing unnecessary checks. Understanding when and how to use these strategies, along with the ChangeDetectorRef methods, is key to optimizing your Angular applications for efficiency and responsiveness.

Stackademic

Thank you for reading until the end. Before you go:

• Please consider clapping and following the writer! 👏
• Follow us on Twitter(X), LinkedIn, and YouTube.
• Visit Stackademic.com to find out more about how we are democratizing free programming education around the world.