Pure vs impure pipes in Angular - Performance Comparison

Performance: Pure vs impure pipes

MEDIUM IMPACT

This concept affects how often Angular recalculates and updates the displayed data, impacting rendering speed and responsiveness.

Transforming data in templates efficiently

Angular

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'pureExample',
  pure: true
})
export class PureExamplePipe implements PipeTransform {
  transform(value: any): any {
    // same calculation
    return value.map(item => item * 2);
  }
}

Pure pipes run only when input references change, reducing unnecessary recalculations and improving rendering speed.

📈 Performance Gainsingle recalculation per input change, reducing reflows and improving interaction responsiveness

Transforming data in templates efficiently

Angular

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'impureExample',
  pure: false
})
export class ImpureExamplePipe implements PipeTransform {
  transform(value: any): any {
    // expensive calculation
    return value.map(item => item * 2);
  }
}

Impure pipes run on every change detection cycle, causing repeated expensive calculations even if input data hasn't changed.

📉 Performance Costtriggers change detection recalculation every cycle, causing multiple reflows and blocking rendering for tens of milliseconds on complex data

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Pure Pipe	Minimal - only on input change	Few - only when data changes	Low - fewer repaints	[OK] Good
Impure Pipe	Repeated on every change detection	Many - triggers frequent reflows	High - frequent repaints	[X] Bad

Rendering Pipeline

Angular runs change detection cycles to update the DOM. Pure pipes execute only when their input changes, minimizing recalculations. Impure pipes run every cycle, increasing CPU and rendering work.

→Change Detection

→Layout

→Paint

⚠️ BottleneckChange Detection recalculations triggered by impure pipes

Core Web Vital Affected

INP

This concept affects how often Angular recalculates and updates the displayed data, impacting rendering speed and responsiveness.

Optimization Tips

1Use pure pipes to limit recalculations to input changes only.

2Avoid impure pipes for expensive operations to prevent frequent reflows.

3Immutable data helps pure pipes detect changes efficiently.

Performance Quiz - 3 Questions

What is the main performance difference between pure and impure pipes in Angular?

A Impure pipes run only when input changes; pure pipes run every change detection cycle.

B Both run equally often but pure pipes use less memory.

C Pure pipes run only when input changes; impure pipes run every change detection cycle.

D Impure pipes cache results; pure pipes do not.

DevTools: Performance

How to check: Record a performance profile while interacting with the app. Look for frequent change detection cycles and pipe recalculations.

What to look for: High CPU usage spikes and long scripting times indicate impure pipes causing repeated recalculations.