Actions for modifying state in Vue - Performance & Optimization

Performance: Actions for modifying state

MEDIUM IMPACT

This affects how quickly the UI updates after state changes and how much work the browser does to re-render components.

Updating multiple pieces of state in response to a user event

Vue

const store = useStore();
function updateStateGood() {
  store.dispatch('updateMultiple', { count: store.state.count + 1, name: 'New Name', active: true });
}

// In store actions:
const actions = {
  updateMultiple({ commit }, payload) {
    commit('setCount', payload.count);
    commit('setName', payload.name);
    commit('setActive', payload.active);
  }
};

Using an action batches state changes and commits mutations in a controlled way, reducing re-renders.

📈 Performance GainSingle re-render after all state updates, improving INP and reducing CPU work.

Updating multiple pieces of state in response to a user event

Vue

const store = useStore();
function updateStateBad() {
  store.state.count++;
  store.state.name = 'New Name';
  store.state.active = true;
}

Directly mutating multiple state properties separately triggers multiple reactivity updates and component re-renders.

📉 Performance CostTriggers multiple re-renders and reactive updates, increasing INP and CPU usage.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Direct multiple state mutations	Multiple reactive triggers	Multiple reflows	High paint cost due to repeated updates	[X] Bad
Batch state changes via actions	Single reactive trigger	Single reflow	Lower paint cost with one update	[OK] Good

Rendering Pipeline

When state changes via actions, Vue batches updates and schedules component re-renders efficiently. This reduces layout recalculations and paints.

→Reactive Dependency Tracking

→Component Update

→Layout

→Paint

⚠️ BottleneckComponent Update stage due to multiple reactive triggers causing repeated re-renders.

Core Web Vital Affected

INP

This affects how quickly the UI updates after state changes and how much work the browser does to re-render components.

Optimization Tips

1Batch multiple state changes inside Vue actions to minimize re-renders.

2Avoid direct multiple mutations outside actions to prevent layout thrashing.

3Use Vue's reactivity system efficiently to keep UI responsive.

Performance Quiz - 3 Questions

Why is batching state changes inside Vue actions better for performance?

A It increases the number of reactive dependencies.

B It delays the UI update indefinitely.

C It reduces the number of component re-renders triggered.

D It disables reactivity temporarily.

DevTools: Performance

How to check: Record a performance profile while triggering state changes. Look for multiple component re-renders or layout recalculations.

What to look for: Check if multiple re-renders happen in quick succession. Fewer re-renders indicate better batching and performance.