Is Angular2 detecting changes based on value equivalence or reference equality?

Question

Is Angular2 detecting changes based on value equivalence or reference equality?

I am currently working with Angular2-RC.1 and I've noticed a significant decrease in performance when setting up a component with a large dataset. The component I'm using is a tabular one (which involves Handsontable) and it has an Input property called "data" that can be bound to external data. Typically, this property is connected to a sizable array containing around one hundred thousand rows.

Upon setting the large dataset, I've observed that the change detection process triggers a full comparison of values across the entire array within the host component (not the original owner of the input property).

@Component({
    selector: "ha-spreadsheet",
    template: "<hot-table [data]="data"></hot-table>",
    directives: [ HotTable ],
    encapsulation: ViewEncapsulation.Emulated
})
export class Spreadsheet implements OnActivate {
    data: { rows: Array<Array<number>> };
    load(service) { this.data = service.getLargeDataSet(); }
}

Here, I present a callstack indicating that the change detection operation is initiated throughout the entirety of the data. (the bold method represents the automatically generated runtime change detection function for my host component) rather than simply comparing references.

https://i.sstatic.net/Kvagp.png

Is this behavior intentional?

typescript angular value-type reference-type angular2-changedetection

Answer 1

Answer №1

After conducting thorough research, I was able to arrive at the solution independently. The unique aspect of the standalone change detection process lies in its comparison of references, a behavior deliberately incorporated into its design.

However, it is crucial to note that when Production mode is disabled, extra validations are implemented to perform equivalence testing on the data of your component.

Answer 2

After conducting thorough research, I was able to arrive at the solution independently. The unique aspect of the standalone change detection process lies in its comparison of references, a behavior deliberately incorporated into its design.

However, it is crucial to note that when Production mode is disabled, extra validations are implemented to perform equivalence testing on the data of your component.

Answer 3

Answer №2

Even though @Jairo has already provided an answer to the question, I feel it's important to elaborate on the code flow he mentioned in a comment on his response (so I don't have to search through the source code again for this information):

When change detection occurs, the following code snippet from view_utils.ts is executed:

export function checkBinding(throwOnChange: boolean, oldValue: any, newValue: any): boolean {
  if (throwOnChange) {  // <<-------  this is set to true in devMode
    if (!devModeEqual(oldValue, newValue)) {
      throw new ExpressionChangedAfterItHasBeenCheckedException(oldValue, newValue, null);
    }
    return false;
  } else {
    return !looseIdentical(oldValue, newValue);  // <<--- so this runs in prodMode
  }
}

Here is the method from change_detection_util.ts that only operates in devMode:

export function devModeEqual(a: any, b: any): boolean {
  if (isListLikeIterable(a) && isListLikeIterable(b)) {
    return areIterablesEqual(a, b, devModeEqual);  // <<--- iterates over all items in a and b!
  } else if (!isListLikeIterable(a) && !isPrimitive(a) && !isListLikeIterable(b) &&
             !isPrimitive(b)) {
    return true;
  } else {
    return looseIdentical(a, b);
  }
}

In devMode change detection, when a template binding involves an iterable object – such as

[arrayInputProperty]="parentArray"

– Angular actually iterates through all items (e.g., parentArray) and compares them, unlike the simple looseIdentical() check performed in prodMode. This behavior can significantly impact performance with large iterables, as seen in the situation discussed earlier.

areIterablesEqual() resides in collection.ts, simply iterating through and comparing each item in the iterables. (I omitted the code since it's straightforward.)

The looseIdentical() function from lang.ts represents what many of us believed change detection always did -- be it in devMode or prodMode:

export function looseIdentical(a, b): boolean {
  return a === b || typeof a === "number" && typeof b === "number" && isNaN(a) && isNaN(b);
}

Thank you @Jairo for delving into this topic.

Note to self: to easily locate the auto-generated change detection object Angular creates for a component, insert {{aMethod()}} in the template and add a breakpoint inside the aMethod(). Once the breakpoint triggers, the View*.detectChangesInternal() methods should appear on the call stack.

Answer 4

Even though @Jairo has already provided an answer to the question, I feel it's important to elaborate on the code flow he mentioned in a comment on his response (so I don't have to search through the source code again for this information):

When change detection occurs, the following code snippet from view_utils.ts is executed:

export function checkBinding(throwOnChange: boolean, oldValue: any, newValue: any): boolean {
  if (throwOnChange) {  // <<-------  this is set to true in devMode
    if (!devModeEqual(oldValue, newValue)) {
      throw new ExpressionChangedAfterItHasBeenCheckedException(oldValue, newValue, null);
    }
    return false;
  } else {
    return !looseIdentical(oldValue, newValue);  // <<--- so this runs in prodMode
  }
}

Here is the method from change_detection_util.ts that only operates in devMode:

export function devModeEqual(a: any, b: any): boolean {
  if (isListLikeIterable(a) && isListLikeIterable(b)) {
    return areIterablesEqual(a, b, devModeEqual);  // <<--- iterates over all items in a and b!
  } else if (!isListLikeIterable(a) && !isPrimitive(a) && !isListLikeIterable(b) &&
             !isPrimitive(b)) {
    return true;
  } else {
    return looseIdentical(a, b);
  }
}

In devMode change detection, when a template binding involves an iterable object – such as

[arrayInputProperty]="parentArray"

– Angular actually iterates through all items (e.g., parentArray) and compares them, unlike the simple looseIdentical() check performed in prodMode. This behavior can significantly impact performance with large iterables, as seen in the situation discussed earlier.

areIterablesEqual() resides in collection.ts, simply iterating through and comparing each item in the iterables. (I omitted the code since it's straightforward.)

The looseIdentical() function from lang.ts represents what many of us believed change detection always did -- be it in devMode or prodMode:

export function looseIdentical(a, b): boolean {
  return a === b || typeof a === "number" && typeof b === "number" && isNaN(a) && isNaN(b);
}

Thank you @Jairo for delving into this topic.

Note to self: to easily locate the auto-generated change detection object Angular creates for a component, insert {{aMethod()}} in the template and add a breakpoint inside the aMethod(). Once the breakpoint triggers, the View*.detectChangesInternal() methods should appear on the call stack.

Is Angular2 detecting changes based on value equivalence or reference equality?

Answer №1

Answer №2

Similar questions

Binding objects and properties from Angular2/Typescript to a template

Issues with Loading childComponent in Angular 5 Parent Component

The promise chain from the ngbModal.open function is being bypassed

Oops! The program encountered an issue on the production environment, but it's running smoothly

Accessing props in setup function in Vue 3

Error: Unable to access 'nativeElement' property from undefined object when trying to read HTML element in Angular with Jasmine testing

The patchState function is iterated within the NGRX component-store effect

Express not functioning properly with custom error handler

Upgrade from using fetch to utilize await in order to achieve the same outcome

Testing the addition of a dynamic class to an HTML button using Jasmine unit tests

Implementing strong security measures for Angular and .Net Core APIs using Azure AD authentication and defining specific application roles

Troubleshooting connectivity problems: SocketIO integration with microservices on a Kubernetes platform

Best practices for managing backend errors with Next.js 14

Exploring Angular 2's nested navigation using the latest router technology

What is causing this TypeScript error to be raised by this statement?

What is the most efficient way to convert a JSON object into a URL search parameter using as few characters as possible?

The attribute "property" is not found in the specified type of "Request<ParamsDictionary>"

The vertical scrolling functionality of the MUI DataGrid in Safari may occasionally fail to work

Having trouble installing angular/cli on Windows7 64 bit using npm?

"Everything seems to be in order with `ng serve`, but `ionic serve`