Menu
I recently released a new component and it seems to be triggering change detection multiple times a second:
// some debugging code
ngDoCheck() {
console.log('DO_CHECK', new Date().toLocaleTimeString());
}
Results:
I've yet to figure out what is triggering this.
Am I reading this output correctly? Change detection is being triggered multiple times a second?
Is there any good method for figuring out what is triggering change detection in an Angular 2 application?
870
By default, angular will run the change detector every time @Input() data is changed or modified. But with OnPush strategy, the change detector is only triggered if the data passed on @Input() has a new reference.
Angular's change detection kicks in to propagate the changes; Change detection goes through every components in the component tree (from top to bottom) to check if the model it depends on changed; If Yes, it will update the component; Angular updates the component's view (DOM).
How is change detection implemented? Angular can detect when component data changes, and then automatically re-render the view to reflect that change.
It means that the component with the async pipe will be marked for check every time a new value is emitted. And Angular will check the component next time it runs change detection even if the value hasn't changed.
The Angular DevTools for Chrome provide a profiler that will list all change detection events and will show the source for each event.
57
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
