Effect for side effects in Angular - Performance & Optimization

Performance: Effect for side effects

MEDIUM IMPACT

This affects how and when side effects run in Angular components, impacting interaction responsiveness and rendering stability.

Running side effects in Angular components

Angular

import { Component, effect, signal } from '@angular/core';
@Component({ selector: 'app-example', template: `<p>{{count()}}</p>` })
export class ExampleComponent {
  count = signal(0);
  constructor() {
    effect(() => {
      const current = this.count();
      document.body.style.backgroundColor = current % 2 === 0 ? 'lightblue' : 'lightgreen';
    });
    setInterval(() => this.count.update(c => c + 1), 1000);
  }
}

Using Angular's effect with signals schedules side effects reactively and avoids blocking rendering, improving responsiveness.

📈 Performance GainSingle reflow per update, non-blocking rendering, and smoother user interaction.

Running side effects in Angular components

Angular

import { Component, OnInit } from '@angular/core';
@Component({ selector: 'app-example', template: `<p>{{count}}</p>` })
export class ExampleComponent implements OnInit {
  count = 0;
  ngOnInit() {
    setInterval(() => {
      this.count++;
      // Direct DOM manipulation or heavy logic here
      document.body.style.backgroundColor = this.count % 2 === 0 ? 'lightblue' : 'lightgreen';
    }, 1000);
  }
}

Direct DOM manipulation inside ngOnInit causes layout thrashing and blocks Angular's rendering cycle, leading to jank and poor input responsiveness.

📉 Performance CostTriggers multiple reflows every second and blocks rendering during each update.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Direct DOM manipulation in ngOnInit	Multiple direct writes	Multiple reflows per interval	High paint cost due to style thrashing	[X] Bad
Angular effect with signals	Reactive updates only	Single reflow per update	Lower paint cost with batched updates	[OK] Good

Rendering Pipeline

Angular's effect runs side effects after reactive state changes, allowing the browser to batch style and layout updates efficiently.

→Style Calculation

→Layout

→Paint

⚠️ BottleneckLayout stage due to style changes triggered by side effects

Core Web Vital Affected

INP

This affects how and when side effects run in Angular components, impacting interaction responsiveness and rendering stability.

Optimization Tips

1Use Angular's effect to run side effects reactively and avoid blocking rendering.

2Avoid direct DOM manipulation inside lifecycle hooks to prevent layout thrashing.

3Monitor layout recalculations in DevTools to detect costly side effects.

Performance Quiz - 3 Questions

What is the main performance benefit of using Angular's effect for side effects instead of direct DOM manipulation in lifecycle hooks?

A It increases bundle size but improves style calculation speed.

B It schedules side effects reactively, reducing blocking and improving input responsiveness.

C It delays all rendering until all effects complete.

D It eliminates the need for CSS styles.

DevTools: Performance

How to check: Record a performance profile while interacting with the component or waiting for updates. Look for long tasks and layout thrashing in the flame chart.

What to look for: Check for repeated layout recalculations and long scripting tasks indicating blocking side effects.