This content originally appeared on DEV Community and was authored by Sandro Jhuliano Cagara
Angular gives us an option to choose the ChangeDetectionStrategy of a component. By default, the value is Default. It's recommended to change that to OnPush strategy to maximize the performance.
By default, Angular run its change detection cycle on all the components whenever there occurs some changes, like a simple click event or when we receive data from ajax calls. Running change detection cycle on every such events are costly and may affect the performance.
We can minimize these checks by setting our component's changeDetection to ChangeDetectionStrategy.OnPush. This will tell Angular to run change detection cycle only when:
- The
Inputreference changes. - Some event occurs in the component or any of the children.
@Component({
selector: 'app-selector',
...
changeDetection: ChangeDetectionStrategy.OnPush
});
Note: Make use of detectChanges() or markForCheck() functions of ChangeDetectorRef to explicitely run the change detection cycle if required.
Resources: A Comprehensive Guide to Angular onPush Change Detection Strategy.
Thanks to @fyodorio .
This content originally appeared on DEV Community and was authored by Sandro Jhuliano Cagara
Sandro Jhuliano Cagara | Sciencx (2022-06-26T16:45:45+00:00) Angular – Use ChangeDetectionStrategy.OnPush. Retrieved from https://www.scien.cx/2022/06/26/angular-use-changedetectionstrategy-onpush/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.