Composables for reusable logic in Vue - Performance & Optimization

Performance: Composables for reusable logic

MEDIUM IMPACT

This affects page load speed and interaction responsiveness by controlling how reusable logic impacts component rendering and reactive updates.

Sharing reactive logic across multiple components

Vue

import { reactive } from 'vue';

export function useCounter() {
  const state = reactive({ count: 0 });
  return { state };
}

Creates a fresh reactive state per component instance, limiting reactivity scope and reducing unnecessary updates.

📈 Performance GainReactive updates are scoped, reducing re-renders and improving interaction responsiveness.

Sharing reactive logic across multiple components

Vue

import { reactive } from 'vue';

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

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

This shares a single reactive state instance globally, causing all components to re-render on any change, even if unrelated.

📉 Performance CostTriggers unnecessary re-renders and reactive updates across all components using the composable.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Global shared reactive state in composable	Low (few DOM nodes)	High (many reactive triggers)	Medium (frequent updates)	[X] Bad
Instance-scoped reactive state in composable	Low (few DOM nodes)	Low (limited reactive triggers)	Low (updates scoped)	[OK] Good

Rendering Pipeline

Composable logic runs during component setup, creating reactive state and functions. Proper scoping limits reactive dependency tracking to each component instance, reducing the number of reactive updates during user interaction.

→JavaScript Execution

→Reactive Dependency Tracking

→Component Render

→Paint

⚠️ BottleneckReactive Dependency Tracking causing excessive component re-renders

Core Web Vital Affected

INP

This affects page load speed and interaction responsiveness by controlling how reusable logic impacts component rendering and reactive updates.

Optimization Tips

1Avoid sharing global reactive state in composables to prevent unnecessary re-renders.

2Scope reactive state inside composables per component instance for better update isolation.

3Use DevTools Performance panel to monitor reactive effect executions and component renders.

Performance Quiz - 3 Questions

What is a performance risk of using a global reactive state inside a Vue composable?

A All components using it re-render on any state change

B It reduces bundle size significantly

C It prevents reactive updates

D It improves initial page load speed

DevTools: Performance

How to check: Record a performance profile while interacting with components using the composable. Look for excessive component re-renders or reactive effect recalculations.

What to look for: High number of component render calls or reactive effect executions indicates inefficient composable usage.