Angular: Change Detection
Change detection is one of the most important topics in angular. By understanding how change detection works, developers can optimize the performance of their applications. This is a critical aspect of Angular’s architecture, as it ensures that the view is always up-to-date with the application state.
The purpose of this blog is to provide a more detailed explanation of change detection.
What is Change detection?
Change detection refers to the process of checking for changes in the application’s state(by comparing the current and the new state) and updating the view accordingly. Angular uses a reactive approach to change detection, which means that it constantly checks for changes to the application’s state and automatically updates the view(DOM) when the state is updated.
This process can be triggered by various events, such as user interactions or changes to the application’s data.
Why Change detection is so important?
- Efficiency and Performance: Change detection allows Angular to update the view only when necessary, which improves performance and reduces the amount of unnecessary work done by the application.
- Consistency: By automatically updating the view when changes occur, change detection helps ensure that the view and the application state are always in sync, which can help prevent bugs and improve the user experience.
- Ease of development: Angular’s change detection system is designed in a way that developers don’t have to write complex code to update the view manually. This can make it easier and faster to build complex applications.
Types of Change detection strategy
There are two types of change detection strategies:
1. Default Change Detection Strategy:
In this strategy, whenever there is a change in the application state, Angular runs change detection on the entire component tree, starting from the root component to the child component to ensure that the most up-to-date application state is reflected on the DOM.
Let’s understand this with the help of an example:
Below is a component tree for an angular application. Wherein when an event occurs on component D, the change detection cycle is executed from component A(root) and goes to all the child components.
This default change detection strategy is designed to be efficient and fast, but it may not be suitable for all applications. For example, if an application has a large number of components or if the application state is complex, the default change detection strategy may lead to performance issues.
In these cases, developers can opt to use a different change detection strategy, such as the “OnPush” strategy.
2. onPush Change detection strategy:
It is a performance optimization technique that can significantly improve the efficiency of change detection in certain scenarios.
When a component’s change detection is set to “OnPush”, Angular only checks for changes if there is a change in the component’s input properties and does not perform a full tree traversal to detect changes.
A component can use the onPush change detection strategy by declaring it in the @component decorator:
@Component({
selector: 'app',
template: `
<span>User name: {{user.name}}</span>
`,
changeDetection: ChangeDetectionStrategy.OnPush
})Let's understand onPush strategy with the help of an example:
Below is the same component tree of an angular application. Wherein Component F and Component G use the onPush strategy. As a result, when an event occurs on component D, the change detection cycle checks for changes in the left subtree, but not in the right subtree as components F and G use the onPush strategy.
This can lead to significant performance improvements in large applications with many components, as it reduces the number of unnecessary checks and updates.
But there is much more to onPush change detection strategy, which I will discuss it in my next blog.
Until then be happy and stay healthy!!!!!
Also, feel free to comment down below, if you have any doubts or suggestions…..
