Smart and dumb component pattern in Angular - Performance & Optimization

Performance: Smart and dumb component pattern

MEDIUM IMPACT

This pattern affects rendering speed and interaction responsiveness by separating data handling from UI rendering.

Separating data fetching and UI rendering in Angular components

Angular

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

@Component({
  selector: 'app-user-display',
  template: `<div>{{user?.name}}</div>`
})
export class UserDisplayComponent {
  @Input() user: any;
}

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

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

Separates data fetching in the smart container component and UI rendering in the dumb component, reducing re-renders and improving maintainability.

📈 Performance GainReduces unnecessary re-renders and isolates UI updates, improving INP and reducing layout thrashing.

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('https://api.example.com/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 and mixes concerns, leading to harder maintenance and potential performance issues.

📉 Performance CostTriggers full component re-render on data fetch, increasing INP and causing potential layout thrashing.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Smart and dumb components separated	Minimal DOM updates in dumb components	Single reflow on data change	Low paint cost due to isolated updates	[OK] Good
Combined data fetching and UI rendering	Full component DOM updates	Multiple reflows on data fetch	Higher paint cost due to full re-render	[X] Bad

Rendering Pipeline

Smart components handle data and state changes, triggering updates only when necessary. Dumb components focus on rendering UI based on inputs, minimizing style recalculations and layout changes.

→Style Calculation

→Layout

→Paint

⚠️ BottleneckLayout due to unnecessary re-renders and data changes in UI components

Core Web Vital Affected

INP

This pattern affects rendering speed and interaction responsiveness by separating data handling from UI rendering.

Optimization Tips

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

2Use dumb components purely for rendering UI based on inputs.

3Avoid mixing data logic and UI to reduce re-renders and layout thrashing.

Performance Quiz - 3 Questions

What is the main performance benefit of separating smart and dumb components in Angular?

A Reduces unnecessary re-renders and improves input responsiveness

B Increases bundle size by duplicating code

C Triggers more layout recalculations

D Blocks rendering until data is fetched

DevTools: Performance

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

What to look for: Check for fewer and shorter layout and paint events in the good pattern, indicating better responsiveness and less layout thrashing.