Composable with reactive state in Vue - Performance & Optimization

Performance: Composable with reactive state

MEDIUM IMPACT

This affects how efficiently the UI updates when reactive state changes, impacting interaction responsiveness and rendering speed.

Sharing reactive state across components using composables

Vue

import { ref } from 'vue';

export function useCounter() {
  const count = ref(0);
  return { count };
}

Each component gets its own reactive state, so updates only affect that component, reducing unnecessary re-renders.

📈 Performance GainReduces re-renders to only affected components, improving interaction responsiveness.

Sharing reactive state across components using composables

Vue

import { reactive } from 'vue';

const state = reactive({ count: 0 });

export function useCounter() {
  return { state };
}

All components using this composable share the same reactive object, causing all to re-render on any change, even if unrelated.

📉 Performance CostTriggers re-renders in all dependent components on any state change, increasing INP latency.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Shared reactive state in composable	Many components update DOM nodes	Multiple reflows triggered	High paint cost due to wide updates	[X] Bad
Instance-specific reactive state in composable	Only affected component updates DOM	Single reflow per update	Lower paint cost focused on small area	[OK] Good

Rendering Pipeline

Reactive state changes trigger Vue's reactivity system, which schedules component updates. These updates cause the browser to recalculate styles, layout, and paint only for affected components.

→JavaScript Execution

→Style Calculation

→Layout

→Paint

→Composite

⚠️ BottleneckJavaScript Execution and Layout when many components re-render unnecessarily

Core Web Vital Affected

INP

This affects how efficiently the UI updates when reactive state changes, impacting interaction responsiveness and rendering speed.

Optimization Tips

1Avoid sharing a single reactive object across many components in composables.

2Create reactive state inside composables so each component has its own instance.

3Minimize reactive dependencies to reduce re-render scope and improve responsiveness.

Performance Quiz - 3 Questions

What is a performance risk of sharing a single reactive state object across many components in a Vue composable?

A The state becomes immutable and cannot update.

B All components re-render on any state change, causing slow input responsiveness.

C The browser caches the state, improving performance.

D Components stop reacting to state changes.

DevTools: Performance

How to check: Record a performance profile while interacting with components using the composable. Look for long scripting times and many style/layout recalculations.

What to look for: High scripting time and multiple layout recalculations indicate inefficient reactive state causing excessive re-renders.