CODEWITHSUNDEEP
angular
Jacopo Sciampi
Jacopo Sciampi

Reputation: 3432

Should use ChangeDetectionStrategy.OnPush for eveything?

As the title says: I'm working on a very big project and in few components I've used ChangeDetectionStrategy.OnPush to avoid bad performances. I was wondering, is it "good" to put in every component that strategy and, in case, use ChangeDetectionRef.detectChanges() to programmatically update the component when needed?

--

That's a small component I have in the app: 

 <my-map
    (updatedGeometry)="setUpdatedGeometry($event)"
    [startGraphEdit]="elementToEdit" [startCut]="elementToCut"
    [startCopy]="elementToCopy"
    [updateGraph]="elementToUpdate"
    [showElement]="elementToShow"
    (selectedProfile)="setProfile($event)"
    [reducedChange]="reducedChange"
    (reduceComposer)="setReducedComposer($event)"
    [labelsVisible]="labelsVisible"
    (visibleComposer)="setVisibleComposer($event)"
    [activateLayers]="activeLayers"
    (curLayers)="setCurrentLayers($event)"
    [loadExtent]="extentToLoad"
    (extent)="setExtent($event)"
    [updateZoom]="newZoom"
    (curZoom)="setCurrentZoom($event)"
    (curLon)="setCurrentLon($event)"
    (curLat)="setCurrentLat($event)"
    (poiNotesOffset)="setPoiNotesOffset($event)"
    [cancelPoiNoteCreation]="visibleDetailPanel"
    (poiNoteUpdatedPosition)="setPoiNoteUpdatedPosition($event)"
    [updatePoiNotePosition]="poiNotesElementForUpdate"
    [removePoiNoteElement]="poiNotesElementForDeletion"
    [updatePoiNotes]="updatePoiNotes"
    [projectCode]="prjCode"
    (poiNote)="poiNote($event)"
    [setPrecisionPointerValues]="precisionPointerValues"
    (precisionPointerValues)="updatePrecisionPointer($event)"
    (exploreToolArea)="setExploreToolArea($event)"
    (extentArea)="setExtentArea($event)"
    [exploreToolRadius]="exploreToolRadius"
    (newExploreToolRadius)="setExploreToolRadius($event)"
    [currEnvironment]="currEnvironment"
    (elementSelected)="onElementClick($event)"
    [setaClasses]="classes"
    [height]="mapHeight"
    [width]="mapWidth"
    [offsetX]="mapOffsetX"
    [offsetY]="mapOffsetY"
    [geometriesToHighlight]="geometriesToHighlight"
    [highlightLineElements]="lineElements"
    (poiList)="setPoiList($event)">
  </my-map>

the component has a lot of Input and Output, and also communicate with other components using Subjects and BehaviorSubjects.

Upvotes: 16

Views: 9070

Answers (3)

Christian Vincenzo Traina
Christian Vincenzo Traina

Reputation: 10384

TLDR: NO.

Angular already introduces a lot of complexity to any code, but it gives you back a lot of features, such as change detection. If you remove change detection from Angular, then you are getting all the bad without the good. If you don't have thousands of components in your page, then you won't notice any perceptible improvements in removing change detection.

So:

  • Always use change detection
  • Detach change detection in particular cases, where checking objects deeply can decrease performance in a considerable way

Upvotes: 3

Ferie
Ferie

Reputation: 1436

Especially with very big projects, the OnPush strategy is recommended to decrease the change detection process that it is a very expensive operation.

With inherited projects, the recommendation is to start applying the OnPush strategy from the leaf components and check that everything is still working.

Only at this point, follow the ancestors and go up one level at time to the root. In the end the overall performance will benefit.

Here there is a very good article about change detection in Angular.

Upvotes: 1

Artyom Amiryan
Artyom Amiryan

Reputation: 2966

ChangeDetectionStrategy.OnPush tells Angular that the component only depends on its @Inputs() and needs to be checked only in the following cases:

The Input reference changes.

An event originated from the component or one of its children.

We run change detection explicitly.

So it depends from your component's content and what you are trying to achieve with it. For example if you are using async pipe for your subscriptions, your component doesn't need ChangeDetectionStrategy.OnPush, because async will do the job automatically. If your component big and uses a lot of data changes, it should contain OnPush strategy, because it will increase your performance, so your whole component code will not run on every changes. If your component small and has only a few properties and methods, or it doesn't contain any subscription or @Input's, or doesn't do any data changes that will happen often, you don't need ChangeDetectionStrategy.OnPush

Upvotes: 16

Related Questions