Sharing composables across components in Vue - Performance & Optimization

Performance: Sharing composables across components

MEDIUM IMPACT

This affects how efficiently state and logic are reused across Vue components, impacting rendering speed and memory usage.

Sharing reactive state logic between multiple components

Vue

const sharedCount = ref(0);
function useCounter() {
  function increment() {
    sharedCount.value++;
  }
  return { count: sharedCount, increment };
}

// In each component
const { count, increment } = useCounter();

All components share the same reactive state, reducing memory and syncing updates efficiently.

📈 Performance GainSaves memory by sharing one reactive object; reduces redundant re-renders.

Sharing reactive state logic between multiple components

Vue

function useCounter() {
  const count = ref(0);
  function increment() {
    count.value++;
  }
  return { count, increment };
}

// In each component
const { count, increment } = useCounter();

Each component creates its own separate reactive state, causing duplicated memory and no shared updates.

📉 Performance CostIncreases memory usage linearly with components; triggers independent reactivity and re-renders.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Separate reactive state per component	Multiple reactive refs per component	Multiple re-renders on updates	Higher paint cost due to many updates	[X] Bad
Shared reactive state via composable	Single reactive ref shared	Single re-render per update	Lower paint cost with fewer updates	[OK] Good

Rendering Pipeline

When composables are shared properly, Vue reactivity tracks a single source of truth, minimizing redundant reactive updates and re-renders.

→Reactive Dependency Tracking

→Component Render

→DOM Update

⚠️ BottleneckExcessive reactive state duplication causes more dependency tracking and component re-renders.

Core Web Vital Affected

INP

This affects how efficiently state and logic are reused across Vue components, impacting rendering speed and memory usage.

Optimization Tips

1Avoid creating new reactive state inside composables for each component if shared state is intended.

2Use shared refs or stores to centralize reactive data across components.

3Monitor component re-renders in DevTools to detect unnecessary reactive duplication.

Performance Quiz - 3 Questions

What is the main performance issue when each component creates its own reactive state from a composable?

A CSS styles are recalculated unnecessarily

B The app bundle size grows significantly

C Memory usage increases and components re-render independently

D The browser blocks rendering on network requests

DevTools: Performance

How to check: Record a performance profile while interacting with components using the composable. Look for repeated reactive updates and component re-renders.

What to look for: High number of component renders or reactive effect recalculations indicates duplicated state; fewer renders means better sharing.