@ViewChild decorator usage in Angular - Performance & Optimization

Performance: @ViewChild decorator usage

MEDIUM IMPACT

This affects the DOM access timing and component rendering flow, impacting interaction responsiveness and layout stability.

Accessing a child element or component in Angular

Angular

export class MyComponent {
  @ViewChild('myElement', { static: true }) myElementRef!: ElementRef;

  ngOnInit() {
    console.log(this.myElementRef.nativeElement.textContent);
  }
}

Using { static: true } allows access earlier in the lifecycle, avoiding delays and extra reflows.

📈 Performance GainSingle reflow and faster interaction readiness.

Accessing a child element or component in Angular

Angular

export class MyComponent {
  @ViewChild('myElement', { static: false }) myElementRef!: ElementRef;

  ngAfterViewInit() {
    setTimeout(() => {
      console.log(this.myElementRef.nativeElement.textContent);
    }, 0);
  }
}

Using setTimeout to access @ViewChild delays DOM access and can cause layout thrashing and unpredictable timing.

📉 Performance CostBlocks rendering for extra milliseconds and triggers multiple reflows due to delayed DOM access.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
@ViewChild with static: false and setTimeout	Delayed DOM query after view init	Multiple reflows due to delayed access	Higher paint cost from layout thrashing	[X] Bad
@ViewChild with static: true accessed in ngOnInit	Early DOM query before view init	Single reflow	Lower paint cost with stable layout	[OK] Good

Rendering Pipeline

The @ViewChild decorator queries the DOM for a child element or component reference. If used with static: false, the query runs after change detection, causing delayed access and potential reflows. With static: true, the query runs earlier, reducing layout shifts.

→DOM Query

→Change Detection

→Layout

→Paint

⚠️ BottleneckLayout stage due to delayed DOM queries causing reflows

Core Web Vital Affected

INP

This affects the DOM access timing and component rendering flow, impacting interaction responsiveness and layout stability.

Optimization Tips

1Use { static: true } with @ViewChild when the child element is present at compile time.

2Avoid accessing @ViewChild inside setTimeout or delayed callbacks to prevent layout thrashing.

3Access @ViewChild references as early as possible in the component lifecycle to improve responsiveness.

Performance Quiz - 3 Questions

What is the main performance benefit of using { static: true } with @ViewChild?

A It allows earlier DOM access, reducing layout shifts and reflows.

B It delays DOM access to after view initialization.

C It disables change detection for the child element.

D It automatically lazy loads the child component.

DevTools: Performance

How to check: Record a performance profile while interacting with the component. Look for long tasks or layout thrashing after view initialization.

What to look for: Check for multiple layout events or delayed scripting tasks indicating inefficient @ViewChild usage.