Granular Performance Control with ChangeDetectorRef Detachment

Snippet

Granular Performance Control with ChangeDetectorRef Detachment

By calling 'detach()' on the ChangeDetectorRef, you remove the component from the automatic change detection tree. This is essential for high-performance scenarios like real-time graphs or WebGL wrappers, where you only want to trigger UI updates manually via 'detectChanges()' based on specific business logic logic.

snippet.js
javascript
@Component({ selector: 'heavy-graph', template: `<div>{{ data }}</div>` })
export class HeavyGraphComponent {
  data = 0;
  constructor(private cd: ChangeDetectorRef) {
    this.cd.detach();
  }
 
  updateData(val: number) {
    this.data = val;
    if (val % 10 === 0) {
      this.cd.detectChanges();
    }
  }
}

angular

Breakdown

this.cd.detach();

Disables automatic change detection for this component and its children.

this.cd.detectChanges();

Manually triggers a localized change detection check for the current view.

Previous snippet Next snippet

More Expert JavaScript exercises →

From your library

Granular Performance Control with ChangeDetectorRef Detachment

Related