Composable accepting parameters in Vue - Performance & Optimization

Performance: Composable accepting parameters

MEDIUM IMPACT

This affects how efficiently Vue manages reactive state and re-renders components when composables receive parameters.

Using a composable that accepts parameters to manage reactive state

Vue

import { ref } from 'vue';

export function useCounter(initial) {
  const count = ref(initial);
  // No watch on parameter, parameter used only once
  return { count };
}

Using the parameter only once avoids unnecessary reactive tracking and re-renders.

📈 Performance Gainsingle reactive setup, fewer re-renders

Using a composable that accepts parameters to manage reactive state

Vue

import { ref, watch } from 'vue';

export function useCounter(initial) {
  const count = ref(initial);
  watch(() => initial, (newVal) => {
    count.value = newVal;
  });
  return { count };
}

Watching the parameter directly causes the composable to react and update whenever the parameter changes, triggering extra reactivity and re-renders.

📉 Performance Costtriggers multiple reactive updates and re-renders on parameter change

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Watching parameter changes inside composable	Multiple reactive updates	Multiple reflows on parameter change	Higher paint cost due to frequent updates	[X] Bad
Using parameter only once as initial value	Single reactive update	Single reflow on state change	Lower paint cost with fewer updates	[OK] Good

Rendering Pipeline

When a composable accepts parameters, Vue tracks dependencies to update reactive state. If parameters are watched or reactive themselves, this can cause extra style recalculations and layout updates.

→Reactive Dependency Tracking

→Component Update

→Style Calculation

→Layout

⚠️ BottleneckReactive Dependency Tracking causing unnecessary component updates

Core Web Vital Affected

INP

This affects how efficiently Vue manages reactive state and re-renders components when composables receive parameters.

Optimization Tips

1Avoid watching composable parameters reactively unless necessary.

2Use parameters as initial values to prevent extra reactive tracking.

3Profile reactive updates to detect unnecessary re-renders caused by parameter changes.

Performance Quiz - 3 Questions

What is a performance risk when a Vue composable watches its input parameter reactively?

A It causes extra reactive updates and re-renders when the parameter changes.

B It reduces the initial load time of the component.

C It prevents the component from updating when needed.

D It decreases memory usage by sharing state.

DevTools: Performance

How to check: Record a performance profile while interacting with the component using the composable. Look for frequent reactive updates and component re-renders triggered by parameter changes.

What to look for: High number of reactive effect recalculations and component updates when parameters change indicates inefficient composable usage.