@Input decorator for parent to child in Angular - Performance & Optimization

Performance: @Input decorator for parent to child

MEDIUM IMPACT

This affects how data is passed and rendered between parent and child components, impacting rendering speed and interaction responsiveness.

Passing data from parent to child component efficiently

Angular

Parent template: <child-comp [data]="parentData" *ngIf="shouldShowChild"></child-comp>
Child component: @Input() data: any;

// Parent updates data only when necessary, uses OnPush change detection

Limits updates to child inputs and uses OnPush strategy to reduce unnecessary re-renders.

📈 Performance GainReduces change detection runs and re-renders, improving INP responsiveness

Passing data from parent to child component efficiently

Angular

Parent template: <child-comp [data]="parentData"></child-comp>
Child component: @Input() data: any;

// Parent updates parentData frequently even if child doesn't need it

Frequent updates to input data cause repeated change detection and re-rendering in the child, slowing interaction.

📉 Performance CostTriggers multiple change detection cycles and re-renders, increasing INP delay

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Frequent input updates without OnPush	Many DOM updates	Multiple reflows	High paint cost	[X] Bad
Input updates with OnPush and immutable data	Minimal DOM updates	Single reflow	Low paint cost	[OK] Good

Rendering Pipeline

When @Input data changes, Angular runs change detection on the child component, recalculates bindings, updates the DOM, and repaints affected parts.

→Change Detection

→Layout

→Paint

⚠️ BottleneckChange Detection triggers layout and paint if input changes affect the DOM

Core Web Vital Affected

INP

This affects how data is passed and rendered between parent and child components, impacting rendering speed and interaction responsiveness.

Optimization Tips

1Avoid frequent updates to @Input properties to reduce change detection overhead.

2Use OnPush change detection strategy in child components to optimize rendering.

3Pass immutable data objects to help Angular detect changes efficiently.

Performance Quiz - 3 Questions

What happens when a parent component frequently updates an @Input property without optimization?

A Child component ignores updates and stays static

B Child component runs change detection and re-renders often, slowing interaction

C Parent component slows down but child is unaffected

D Angular caches the input and skips updates automatically

DevTools: Performance

How to check: Record a performance profile while interacting with the parent component updating inputs; look for change detection and rendering times.

What to look for: Look for frequent change detection cycles and long scripting times indicating inefficient input updates.