Search code examples
typescriptangularvalue-typereference-typeangular2-changedetection

Angular2 detect changes using value equivalence or reference equality?

I am using Angular2-RC.1 and I have seen a poor performance when I setup a component having large data. I have a tabular component (wrapping Handsontable) and I expose a bindable Input property called "data". This property is usually bound to a large array (around one hundred thousand rows).

When I set my large dataset the change detection is causing a test of value equivalence over the whole array in the host component (not the 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 show a callstack showing that the change detection is launched over the whole data. (the bold method is the runtime auto-generated change detection function for my host component) instead to simply compare the references.

callstack

Is this the intented behavior?

Solution

  • I have found the answer by myself. The standalone change detection process is comparing references (this is its behavior by design).

    BUT when Production mode is NOT enabled then additional assertions perform equivalence testing over your component's data.