Creating a custom composable in Vue - Performance Optimization Steps

Performance: Creating a custom composable

MEDIUM IMPACT

This affects how efficiently reactive logic is reused and how many reactive dependencies are tracked, impacting interaction responsiveness and memory usage.

Reusing reactive logic across multiple components

Vue

import { ref } from 'vue';

const sharedCount = ref(0);

export function useSharedCounter() {
  function increment() {
    sharedCount.value++;
  }
  return { count: sharedCount, increment };
}

// Components share the same reactive state

Sharing reactive state reduces duplicated reactive tracking and memory usage, improving responsiveness.

📈 Performance GainReactive dependencies tracked once, improving INP and reducing memory footprint.

Reusing reactive logic across multiple components

Vue

import { ref } from 'vue';

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

// Used inside multiple components without memoization or shared state

Each component creates its own reactive state, causing duplicated reactive tracking and more memory use.

📉 Performance CostIncreases reactive dependencies linearly with component instances, causing slower INP and higher memory.

Performance Comparison

Pattern	Reactive Dependencies	Memory Usage	Update Cost	Verdict
Separate reactive state per component	High (one per instance)	High	High (many updates)	[X] Bad
Shared reactive state in composable	Low (shared once)	Low	Low (single source)	[OK] Good

Rendering Pipeline

Custom composables create reactive dependencies that Vue tracks. When reactive state changes, Vue schedules component updates affecting the rendering pipeline stages.

→Reactive Dependency Tracking

→Component Update

→Render

→Paint

⚠️ BottleneckReactive Dependency Tracking and Component Update stages can become expensive if many duplicated reactive states exist.

Core Web Vital Affected

INP

This affects how efficiently reactive logic is reused and how many reactive dependencies are tracked, impacting interaction responsiveness and memory usage.

Optimization Tips

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

2Reuse reactive dependencies to reduce memory and update overhead.

3Profile reactive updates to detect duplicated reactive tracking.

Performance Quiz - 3 Questions

What is a performance risk when creating a custom composable that returns new reactive state for each component instance?

A It causes layout shifts (CLS)

B Duplicated reactive tracking increases memory and update cost

C It blocks the initial page load

D It reduces bundle size

DevTools: Performance

How to check: Record a performance profile while interacting with components using the composable. Look for many reactive updates or long scripting times.

What to look for: High scripting time or many reactive updates indicate duplicated reactive state; fewer updates and shorter scripting time indicate efficient composables.