JavaScript

JavaScript

By DeepSource

Missing ChangeDetectionStrategy.OnPush for angular codebase JS-0576

Bug risk
Autofix

Angular uses the default component change detection strategy, ChangeDetectionStrategy.Default by default. This may have lower performance than using a strategy such as ChangeDetectionStrategy.OnPush.

This strategy doesn’t assume anything about the application. This means there will be a refresh triggered whenever an event such as an expiring timer, an XHR request, or even when a promise is executed. If something changes in the application as a result of various user events, timers, XHR events or promises among other things, the default change detection strategy will trigger a refresh of all components, including unaffected ones.

By using ChangeDetectionStrategy.OnPush, Angular will only run the change detection cycle in the following cases:

  • Input references change.
  • If an event originated from the component or one of its children.
  • If manually called.

Bad Practice

@Component({
    changeDetection: ChangeDetectionStrategy.Default
})
class Test {}

Recommended

@Component({
    changeDetection: ChangeDetectionStrategy.OnPush
})
class Test {}