Why services are needed in Angular - Performance Evidence

Performance: Why services are needed

MEDIUM IMPACT

This concept affects how efficiently data and logic are shared across components, impacting rendering speed and user interaction responsiveness.

Sharing data and logic between multiple components

Angular

Create a singleton Angular service that fetches data once and shares it via Observables to ComponentA and ComponentB.

Data is fetched once, cached, and shared, reducing network load and avoiding repeated rendering.

📈 Performance GainSingle network request and fewer change detection runs, improving INP.

Sharing data and logic between multiple components

Angular

ComponentA and ComponentB each fetch the same data independently inside ngOnInit() without a shared service.

This causes duplicate HTTP requests and redundant processing, increasing load time and CPU usage.

📉 Performance CostTriggers multiple network requests and duplicate change detection cycles.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Duplicate data fetching in components	Multiple redundant DOM updates	Multiple reflows due to repeated change detection	Higher paint cost from frequent updates	[X] Bad
Shared data via singleton service	Minimal DOM updates triggered by shared Observables	Single reflow per data change	Lower paint cost due to fewer updates	[OK] Good

Rendering Pipeline

Services centralize data and logic, reducing redundant DOM updates and network calls. Components subscribe to service data streams, triggering fewer change detection cycles.

→Network

→JavaScript Execution

→Change Detection

→Rendering

⚠️ BottleneckExcessive network requests and repeated change detection caused by duplicated logic in components.

Core Web Vital Affected

INP

This concept affects how efficiently data and logic are shared across components, impacting rendering speed and user interaction responsiveness.

Optimization Tips

1Use singleton services to share data and logic across components.

2Avoid fetching the same data multiple times in different components.

3Centralize state management in services to reduce redundant rendering.

Performance Quiz - 3 Questions

What is a main performance benefit of using Angular services to share data?

A Increases bundle size significantly

B Reduces duplicate network requests and redundant rendering

C Triggers more change detection cycles

D Blocks rendering until all components load

DevTools: Performance

How to check: Record a session while interacting with components that fetch data. Look for multiple network requests and repeated scripting or rendering tasks.

What to look for: Multiple identical network requests and frequent scripting tasks indicate redundant data fetching; fewer requests and smoother scripting indicate good service use.