As you know, for the sake of good performance, we always try to minimize rendering in single page applications. For instance, in React whenever a state or props change inside a component, that change make that component re execute, re evaluate and finally re render.

So, are there any similar conditions in Angular ? and what are the best practices and patterns for reducing extra rendering ?

CodePudding user response：

This is a huge topic to cover here but I would suggest the following article for starters: https://blog.angular-university.io/how-does-angular-2-change-detection-really-work/

TLDR;

What happens is that Angular at startup time will patch several low-level browser APIs, such as for example addEventListener, which is the browser function used to register all browser events, including click handlers. Angular will replace addEventListener with a new version

So by extending base functionality, angular understands changes that trigger re-evaluation of values and rerendering needs.

As an extra, we need to mention that the comparisons are not deep inside reference types, so some handling should happen.

In the article, several methods for performance tweaking are mentioned like

1. On push change detection method.
2. Disabling automatic detection for a component and triggering the cycles manually.
3. Using immutable objects with the help of libraries line immutable.js

As you can understand, these being their own pitfalls and considerations