Rules of change detections in angular

What makes angular running change detection and how to optimize it

Photo by Chester Alvarez on Unsplash

What is change detection?

Change detection is the mechanism designed to track changes in an application state and render the updated state on the screen. It ensures that the user interface always stays in sync with the internal state of the program.

How change detections work in angular?

Angular uses ZoneJS to intercept events that occurred in the application and run a change detection cycle automatically.

We can reduce events that angular intercept by changing ChangeDetectionStrategy in component decorator to ChangeDetectionStrategy.OnPush

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

1️⃣ The Input reference changes.
2️⃣ An event originated from the component or one of its children. ( The rule applies only to DOM events)
3️⃣ We run change detection explicitly.
4️⃣ Observable emits a new value inside the component template.

How to optimize running of change detection

• Always use OnPush Change Detection Strategy.
• Always use immutable data because once you set component to OnPush strategy angular will use shallow comparison to detect changes and perform the reRender task.
• Prevent unnecessary emits in observables inside components.
• Prevent triggers unnecessary async tasks like scrolling using technics like Debounce or Throttle.
• Reduce the number of long tasks by moving it to Web Workers.
• Use runOutsideAngular when starting a work consisting of one or more asynchronous tasks that don’t require UI.