Actions and reducers pattern in Angular - Performance & Optimization

Performance: Actions and reducers pattern

MEDIUM IMPACT

This pattern affects how state changes trigger UI updates and how efficiently Angular processes those changes during user interactions.

Updating application state on user actions

Angular

const reducer = (state, action) => {
  switch(action.type) {
    case 'UPDATE':
      return { ...state, data: action.payload };
    default:
      return state;
  }
};

Using shallow copies and simple state updates reduces computation and Angular's change detection workload.

📈 Performance GainReduces UI blocking time by 50% or more, improving input responsiveness.

Updating application state on user actions

Angular

const reducer = (state, action) => {
  switch(action.type) {
    case 'UPDATE':
      // heavy computation or deep cloning
      const newState = JSON.parse(JSON.stringify(state));
      newState.data = action.payload;
      return newState;
    default:
      return state;
  }
};

Deep cloning state on every action causes slow reducer execution and triggers excessive Angular change detection cycles.

📉 Performance CostBlocks UI thread for tens of milliseconds on each update, increasing INP.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Heavy deep cloning in reducers	Triggers full component tree checks	Multiple reflows if many bindings update	High paint cost due to many DOM updates	[X] Bad
Shallow state updates with OnPush	Minimal DOM updates, only changed components	Single reflow per update	Low paint cost	[OK] Good

Rendering Pipeline

Actions dispatched update the state via reducers, triggering Angular's change detection which recalculates templates and updates the DOM.

→Change Detection

→Template Rendering

→DOM Update

⚠️ BottleneckChange Detection when reducers cause large or unnecessary state changes

Core Web Vital Affected

INP

This pattern affects how state changes trigger UI updates and how efficiently Angular processes those changes during user interactions.

Optimization Tips

1Avoid heavy computations or deep cloning inside reducers.

2Use shallow copies to update only changed state parts.

3Combine reducers with OnPush change detection for best UI responsiveness.

Performance Quiz - 3 Questions

What is a main performance risk when reducers perform deep cloning of state objects?

A It reduces bundle size

B It blocks the UI thread causing slow input responsiveness

C It improves rendering speed

D It prevents change detection

DevTools: Performance

How to check: Record a performance profile while interacting with the app, then analyze the Change Detection and scripting time.

What to look for: Look for long scripting tasks during state updates and excessive change detection cycles indicating inefficient reducers.