NgRx store concept in Angular - Performance & Optimization

Performance: NgRx store concept

MEDIUM IMPACT

NgRx store affects how state changes impact rendering and user interaction responsiveness in Angular apps.

Managing application state with NgRx store

Angular

this.store.select(selectFeatureSlice).subscribe(data => { this.featureData = data; });

Selecting only the needed slice reduces re-renders to when relevant data changes, lowering DOM updates.

📈 Performance Gainreduces reflows to only relevant state changes, improving INP

Managing application state with NgRx store

Angular

this.store.select(state => state).subscribe(data => { this.fullState = data; this.cd.detectChanges(); });

Selecting the entire state causes all components subscribing to this to re-render on any state change, triggering many unnecessary reflows.

📉 Performance Costtriggers reflow for every state change, even unrelated ones

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Selecting entire state	Many components update	Many reflows	High paint cost	[X] Bad
Selecting feature slice only	Minimal DOM updates	Few reflows	Low paint cost	[OK] Good

Rendering Pipeline

NgRx store updates trigger Angular change detection which leads to style recalculation, layout, and paint if components re-render.

→Change Detection

→Style Calculation

→Layout

→Paint

⚠️ BottleneckChange Detection causing unnecessary component re-renders

Core Web Vital Affected

INP

NgRx store affects how state changes impact rendering and user interaction responsiveness in Angular apps.

Optimization Tips

1Select only needed state slices with selectors to reduce re-renders.

2Use OnPush change detection strategy to limit Angular checks.

3Avoid subscribing to the entire store state to prevent excessive DOM updates.

Performance Quiz - 3 Questions

What is a performance risk when selecting the entire NgRx store state in a component?

A Improves initial load time

B Triggers re-renders on any state change, even unrelated ones

C Reduces bundle size significantly

D Prevents change detection from running

DevTools: Performance

How to check: Record a session while interacting with the app, then inspect the flame chart for frequent change detection cycles and re-renders.

What to look for: Look for excessive Angular change detection and layout recalculations indicating inefficient state selection.