PUT and DELETE requests in Angular - Performance & Optimization

Performance: PUT and DELETE requests

MEDIUM IMPACT

This affects the network request time and how quickly the UI updates after data changes.

Updating or deleting data on the server and reflecting changes in the UI

Angular

this.http.put('/api/items/' + id, data).subscribe(() => { this.items = this.items.map(item => item.id === id ? {...item, ...data} : item); });
this.http.delete('/api/items/' + id).subscribe(() => { this.items = this.items.filter(item => item.id !== id); });

Updates local data directly without reloading all items, reducing network and rendering cost.

📈 Performance GainSingle network request per action and immediate UI update without extra reloads

Updating or deleting data on the server and reflecting changes in the UI

Angular

this.http.put('/api/items/' + id, data).subscribe(() => { this.loadAllItems(); });
this.http.delete('/api/items/' + id).subscribe(() => { this.loadAllItems(); });

Reloading all items after each PUT or DELETE causes extra network requests and delays UI updates.

📉 Performance CostTriggers multiple network requests and blocks UI update until all data reloads

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Reload all data after PUT/DELETE	Many DOM updates	Multiple reflows	High paint cost	[X] Bad
Update local state after PUT/DELETE	Minimal DOM updates	Single reflow	Low paint cost	[OK] Good

Rendering Pipeline

PUT and DELETE requests trigger network activity followed by UI updates that affect layout and paint.

→Network

→JavaScript Execution

→Layout

→Paint

⚠️ BottleneckNetwork latency and JavaScript processing of updated data

Core Web Vital Affected

INP

This affects the network request time and how quickly the UI updates after data changes.

Optimization Tips

1Avoid reloading all data after PUT or DELETE requests.

2Update UI state locally to reflect changes immediately.

3Minimize network requests to improve interaction responsiveness.

Performance Quiz - 3 Questions

What is a performance drawback of reloading all data after a PUT or DELETE request?

A It improves UI responsiveness by batching updates.

B It reduces network requests but increases CPU usage.

C It causes multiple network requests and delays UI updates.

D It has no impact on performance.

DevTools: Network and Performance

How to check: Open DevTools, go to Network tab, perform PUT or DELETE, observe request timing; then open Performance tab, record UI update after request completes.

What to look for: Look for minimal network requests and short UI update times indicating fast interaction responsiveness.