Container and presentational components in Angular - Performance & Optimization

Performance: Container and presentational components

MEDIUM IMPACT

This pattern affects rendering speed and responsiveness by separating data logic from UI rendering, reducing unnecessary DOM updates.

Separating data fetching and UI rendering in Angular components

Angular

import { Component, signal, Input } from '@angular/core';

@Component({
  selector: 'app-user-container',
  standalone: true,
  template: `<app-user-presentational [user]="user()"></app-user-presentational>`
})
export class UserContainerComponent {
  user = signal(null);

  constructor() {
    fetch('/api/user')
      .then(res => res.json())
      .then(data => this.user.set(data));
  }
}

@Component({
  selector: 'app-user-presentational',
  standalone: true,
  template: `<div>{{ user?.name }}</div>`
})
export class UserPresentationalComponent {
  @Input() user: any | null = null;
}

Separates data logic from UI, so only presentational component updates when data changes, reducing reflows and improving responsiveness.

📈 Performance GainSingle reflow on data update; faster interaction response; smaller change detection scope.

Separating data fetching and UI rendering in Angular components

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-user',
  template: `<div>{{ user?.name }}</div>`
})
export class UserComponent {
  user = null;

  constructor() {
    fetch('/api/user')
      .then(res => res.json())
      .then(data => this.user = data);
  }
}

Combining data fetching and UI rendering causes the component to re-render fully on data change, triggering multiple DOM updates and slowing interaction.

📉 Performance CostTriggers multiple reflows and repaints on data update; blocks interaction until data loads.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Combined data + UI component	High (full component tree updates)	Multiple reflows per data change	High paint cost due to large updates	[X] Bad
Container + presentational components	Low (only presentational updates)	Single reflow per data change	Low paint cost focused on UI parts	[OK] Good

Rendering Pipeline

Container components handle data and state changes, triggering signals or inputs that update presentational components. This limits the scope of style recalculations and layout changes to only the UI parts that need updating.

→Style Calculation

→Layout

→Paint

⚠️ BottleneckLayout due to unnecessary full component re-renders

Core Web Vital Affected

INP

This pattern affects rendering speed and responsiveness by separating data logic from UI rendering, reducing unnecessary DOM updates.

Optimization Tips

1Keep data fetching and state management in container components only.

2Use presentational components to render UI based on inputs or signals.

3Minimize the scope of change detection to improve interaction responsiveness.

Performance Quiz - 3 Questions

What is the main performance benefit of using container and presentational components in Angular?

A Increases bundle size by splitting components

B Reduces unnecessary re-renders by isolating UI updates

C Triggers more reflows due to extra components

D Blocks rendering until all data is fetched

DevTools: Performance

How to check: Record a performance profile while interacting with the component. Look for long tasks or multiple layout recalculations triggered by data updates.

What to look for: Fewer layout recalculations and shorter scripting times indicate better separation and performance.