Would you recommend ChangeDetectionStrategy.OnPush as default changeDetection in Angular 2?

Question

Would it be a reasonable convention within an Angular-2 project to always use

changeDetection: ChangeDetectionStrategy.OnPush

within a component's decorator? Except when there are clear reasons to use the default-strategy?

Answer 1

No, I wouldn't recommend that.

Angular 2 change detection is very fast. If you have a small project, I wouldn't bother using it.

If you have a large project, I would likely only use OnPush on certain "leaf" components -- leaf components that have view bindings that only depend on input properties. (A "leaf" component has no child components.)

Beware that OnPush can prevent child components from being automatically change detected, because if nothing caused the OnPush component to be change detected, none of its children will be checked either. Hence the reason I normally only use it on leaf components, to avoid this possible issue.

Also beware that if you use JavaScript reference types for input properties, OnPush will not detect changes you make to the properties of those reference types (e.g., if you add or remove an element from an array, or if you modify an object property's value.)

Answer 2

Especially for big project, the answer is YES and it is always recommended to add it as first thing when you create new components.

The reason is simple: to decrease the change detection process that it is a very expensive operation.

There are many ways of starting the detection when needed, maybe the most used is to trigger manually changeDetection() from the ChangeDetectorRef. Another way is using the async pipe in the view if you are waiting for a subscription value.

To add automatically the OnPush strategy when running the ng generate component command in the terminal, you just need to add the option in your angular.json at the schematics node:

...

    "schematics": {
        "@schematics/angular:component": {
            "changeDetection": "OnPush",
            "prefix": "app",
            "styleext": "scss"
        },
        "@schematics/angular:directive": {
            "prefix": "app"
        }
    }
...

Answer 3

No.

Why? not because the default change detection strategy is better. But because switching from it to OnPush can be cumbersome and impactful. You might also face few issues if you are using any 3rd party applications that do not use OnPush.

I just don't get it why a lot of people are joining the default change detection strategy bandwagon and are recommending it. In my opinion angular should have always had only one option - OnPush. This is not something new. Silverlight/WPF do this via INotifyPropertyChanged

public string UserName 
{
    get { return this.username; }
    set
    {
        this.username = value;
        // tell the UI that this UI bound property has been changed and that it is time to update the UI
        PropertyChanged(this, new PropertyChangedEventArgs("UserName")); 
    }
}

Answer 4

You could use immutable.js which would 'freeze' all your objects and not allow modification, this would be a far safer route if you want to use OnPush globally, to prevent errors in component binding