Props for parent to child data in Vue - Performance & Optimization

Performance: Props for parent to child data

MEDIUM IMPACT

This affects the rendering speed and responsiveness by controlling how data flows from parent to child components in Vue.

Passing data from a parent component to a child component

Vue

<template>
  <ChildComponent :a="complexObject.a" />
</template>
<script setup>
import { reactive } from 'vue'
const complexObject = reactive({ a: 1, b: 2, c: 3 })
</script>

Passing only the needed primitive prop reduces unnecessary reactivity and re-renders in the child.

📈 Performance GainSingle re-render only when the specific prop changes

Passing data from a parent component to a child component

Vue

<template>
  <ChildComponent :data="complexObject" />
</template>
<script setup>
import { reactive } from 'vue'
const complexObject = reactive({ a: 1, b: 2, c: 3 })
</script>

Passing a large reactive object directly causes the child to re-render on any change, even if unrelated to the child's needs.

📉 Performance CostTriggers multiple re-renders and recalculations on every reactive change

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Passing large reactive object as prop	High (many reactive dependencies)	Multiple reflows on any change	High paint cost due to frequent updates	[X] Bad
Passing only needed primitive props	Low (minimal reactive dependencies)	Single reflow on prop change	Low paint cost with fewer updates	[OK] Good

Rendering Pipeline

When props change, Vue triggers reactive updates that flow through style recalculation, layout, paint, and composite stages. Minimizing prop changes reduces these costly steps.

→Reactive Update

→Virtual DOM Diffing

→Layout

→Paint

⚠️ BottleneckReactive Update and Virtual DOM Diffing when many props or large objects change

Core Web Vital Affected

INP

This affects the rendering speed and responsiveness by controlling how data flows from parent to child components in Vue.

Optimization Tips

1Pass only the props the child component actually needs.

2Avoid passing large reactive objects directly as props.

3Use primitive values for props to minimize reactivity overhead.

Performance Quiz - 3 Questions

What is a performance benefit of passing only needed primitive props instead of a large reactive object?

A Reduces unnecessary re-renders in child components

B Increases bundle size

C Triggers more layout recalculations

D Blocks rendering longer

DevTools: Performance

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

What to look for: Excessive component updates or long scripting times indicate inefficient prop usage.