At OnceHub, we are continuously looking for ways to improve performance and create a better user experience.
One way to do that is with the change detection strategy in Angular.
Ever since the Angular framework was created, Angular change detection has been a subject of great discussions and curiosity. This blog post will explain what Angular change detection is, how it works, and the different strategies Angular provides.
In Angular, we have a view (template) and a model (component). We need to keep both of them in sync so whenever we make a change in the component, it will get rendered by the template immediately. This syncing process is called change detection.
Angular handles this for us with its own change detection mechanism.
Angular always keeps track of all the components and updates the view immediately. Upon application startup, a change detector is created for each UI component and arranged in a tree. In each change detection cycle, Angular uses a recursive approach with depth-first search algorithm to identify and re-render the updated component’s view. The Angular change detection cycle gets triggered by the DOM events, timers, observables, and so on.
Angular provides two change detection strategies:
The name itself states that Angular uses this by default. In this strategy, Angular traverses each and every component in the component UI tree in a recursive approach and re-renders the view if the content is updated in the model.
Now let’s move to the OnPush strategy.
If you are developing a large application like OnceHub, where we support a large application consisting of many features, running the checks for the entire application again and again is not a good approach. Although Angular can perform change detection very quickly, we can still improve the performance with OnPush.
What if I told you that instead of checking the component in each and every cycle, we will check it only when it’s required? Yes, this is possible with onPush change detection strategy.
In Angular, if a component is using onPush change detection (component C in the image below), the component itself and its all children will be skipped in regular change detection cycle and will be checked only when:
When a component uses the onPush change detection strategy, only the above rules will cause the component or its child components to be updated. This cannot be overridden by a child component.
Now let’s suppose component C or any of its children generates any of the above four cases, then the entire path from that component to the root will be marked for check and will be re-rendered in the next cycle.
So from the above discussion, onPush looks great, but “with great power comes great responsibility”. When we are using onPush strategy, we need to consider the following points:
Using the onPush strategy is an overall win situation because without it, Angular is running change detection on each component for no reason and wasting CPU cycles.
We have started using onPush change detection strategies in our project and applying it to more and more components every day. Hopefully soon, all our components will use it and we can see significant performance improvements.
Happy coding!!!
Prakash started his career as an Angular Developer in January 2017. From the very beginning, he was crazy about Angular and worked on various Angular versions, starting from Angular 2. He joined OnceHub as a software engineer in June 2019. At work, he is in love with good quality code and at home, he loves listening to music and reading/writing poetry.