Compound components pattern in Vue - Performance & Optimization

Performance: Compound components pattern

MEDIUM IMPACT

This pattern affects rendering speed and interaction responsiveness by managing how nested components communicate and update.

Sharing state between related components in a UI widget

Vue

CompoundComponent.vue
<template>
  <slot name="input" :value="value" :updateValue="updateValue" />
  <slot name="display" :value="value" />
</template>
<script setup>
import { ref } from 'vue'
const value = ref('')
function updateValue(newVal) {
  value.value = newVal
}
</script>

Usage.vue
<template>
  <CompoundComponent>
    <template v-slot:input="{ value, updateValue }">
      <input :value="value" @input="e => updateValue(e.target.value)" />
    </template>
    <template v-slot:display="{ value }">
      <p>{{ value }}</p>
    </template>
  </CompoundComponent>
</template>

Centralizes state in one component and shares it via scoped slots, reducing prop drilling and unnecessary re-renders.

📈 Performance GainSingle reactive source reduces re-renders and improves INP by minimizing DOM updates.

Sharing state between related components in a UI widget

Vue

Parent.vue
<template>
  <div>
    <ChildA :value="value" @update="value = $event" />
    <ChildB :value="value" />
  </div>
</template>
<script setup>
import { ref } from 'vue'
const value = ref('')
</script>

ChildA.vue
<template>
  <input :value="value" @input="$emit('update', $event.target.value)" />
</template>
<script setup>
const props = defineProps({ value: String })
</script>

ChildB.vue
<template>
  <p>{{ value }}</p>
</template>
<script setup>
const props = defineProps({ value: String })
</script>

Passing state and events through multiple props and emits causes many re-renders and prop drilling, increasing DOM updates and slowing interaction.

📉 Performance CostTriggers multiple re-renders on each input, causing INP delays and more DOM updates.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Prop drilling with multiple child components	High - many props and emits	Multiple reflows per input	High paint cost due to frequent updates	[X] Bad
Compound components with shared reactive state	Low - centralized state	Single reflow per input	Lower paint cost due to fewer updates	[OK] Good

Rendering Pipeline

Compound components centralize state management, reducing the number of reactive updates and DOM mutations. This lowers the frequency of layout recalculations and paints during user interactions.

→Style Calculation

→Layout

→Paint

⚠️ BottleneckLayout due to frequent reflows from multiple component updates

Core Web Vital Affected

INP

This pattern affects rendering speed and interaction responsiveness by managing how nested components communicate and update.

Optimization Tips

1Centralize shared state in the parent compound component to avoid prop drilling.

2Use scoped slots to pass state and update functions to child components efficiently.

3Minimize the number of reactive updates to reduce layout recalculations and improve INP.

Performance Quiz - 3 Questions

What is a main performance benefit of using compound components in Vue?

A Reducing unnecessary re-renders by sharing state centrally

B Increasing the number of DOM nodes for better structure

C Using more props to pass data deeply

D Avoiding scoped slots to simplify templates

DevTools: Performance

How to check: Record a performance profile while interacting with the component. Look for frequent scripting and layout events triggered by input.

What to look for: High number of layout recalculations and long scripting times indicate poor compound component usage.