CODEWITHSUNDEEP
angularangular-changedetectionngzoneangular-ngzone
Felix
Felix

Reputation: 4595

Why does Angular async pipe uses cdr.markForCheck() and not cdr.detectChanges()?

I have a general Angular question:

Why does Angular async pipe use cdr.markForCheck() instead of cdr.detectChanges()?

What I see there are two main differences in these two 'styles':

  1. markForCheck() marks the path to be checked up to the root component - what to update
  2. markForCheck() lets the change detection happen in current or next cycle - timing

My thoughts or questions:

  1. why do we need to check whole path to the root (in async pipe)? Why not just current component? (detectChanges()) - this relates to what to update

  2. why just mark only (for current/next cycle - in markForCheck() using ngZone)? Why not detect changes immedially? (detectChanges()) this relates to timing

  3. what if there is no ngZone async trigger / no async operation? Then the view update won't happen?

  4. what would happen if we changed async pipe to use detectChanges() instead?

async pipe:

  private _updateLatestValue(async: any, value: Object): void {
    if (async === this._obj) {
      this._latestValue = value;
      this._ref.markForCheck();
    }
  }

Edit:

Please do not explain what each of the methods does as I read it in docs many times and it is not comprehensible for me to understant from the async point of view. The important part for me to know is why in regards to what to update and timing.

Upvotes: 5

Views: 2558

Answers (2)

Marek W
Marek W

Reputation: 729

For proper documentation check ChangeDetectorRef

detectChanges

Checks this view and its children

If your class has changed but it the view has not been updated yet, you need to notify Angular to detect those changes.

markForCheck

When a view uses the OnPush (checkOnce) change detection strategy, explicitly marks the view as changed so that it can be checked again.

From the text alone you can already see, that this strategy is used for cases, where the components detection strategy has been changed to onPush (e.g. if an @Input() has changed).

Update

To answer your questions directly:

  1. why do we need to check whole path to the root (in async pipe)? Why not just current component? (detectChanges()) - this relates to what to update

Its not checking the root, but rather the ancestors of your component enter image description here

  1. why just mark only (for current/next cycle - in markForCheck() using ngZone)? Why not detect changes immedially? (detectChanges()) this relates to timing

I would assume that this is a performance related topic. Gather all the checks which needs to be run and perform them in the next cycle.

  1. what if there is no ngZone async trigger / no async operation? Then the view update won't happen?

Correct, if Angular will not be notified, then nothing will change in the view

  1. what would happen if we changed async pipe to use detectChanges() instead?

I guess it would work as well, but instead of only checking the changes it would directly perform the update of the view.

Upvotes: 2

StepUp
StepUp

Reputation: 38154

As Angular doc says:

detectChanges() is:

Checks this view and its children. Use in combination with detach to implement local change detection checks.

And

markForCheck() is:

When a view uses the OnPush (checkOnce) change detection strategy, explicitly marks the view as changed so that it can be checked again.

So detectChanges() runs change detection immediately, however markForCheck() does not run change detection.

So it looks like async pipe uses markForCheck to avoid performance issues. I mean using markForcheck() in async pipe helps to avoid running of unnecessary change detection.

UPDATE:

Question 1:

What if there is no current change detection in progress and there is no ngZone async trigger for future CD?

No, view will not be updated, however, it will mark all components from current component to root component that their state is CheckEnabled. The source code:

export function markParentViewsForCheck(view: ViewData) {
    let currView: ViewData|null = view;
    while (currView) {
        if (currView.def.flags & ViewFlags.OnPush) {
           currView.state |= ViewState.ChecksEnabled;
        }
    currView = currView.viewContainerParent || currView.parent;
    }
}

Question 2:

And in regards to what to update, why do I need to mark whole path up to the root? ...and in the second solution (detectChanges) not?

Please, read this nice answer Angular markForCheck vs detectChanges. In short, it is better to use markForCheck() method.

Upvotes: 1

Related Questions