Props drilling problem in Vue - Performance & Optimization

Performance: Props drilling problem

MEDIUM IMPACT

This affects the rendering speed and responsiveness by increasing the number of component updates and re-renders due to passing props through many layers.

Passing data from a top-level component to a deeply nested child component

Vue

<Parent>
  <Child1 />
</Parent>

// Use provide/inject or a global store to share data directly with Child3 without passing through Child1 and Child2

By using provide/inject or a store, only the components that need the data re-render, reducing unnecessary updates.

📈 Performance GainReduces re-renders and prop updates to only relevant components, improving INP and lowering CPU load.

Passing data from a top-level component to a deeply nested child component

Vue

<Parent>
  <Child1 :data="data">
    <Child2 :data="data">
      <Child3 :data="data" />
    </Child2>
  </Child1>
</Parent>

Each intermediate component must receive and pass down props even if they don't use them, causing unnecessary re-renders and prop updates.

📉 Performance CostTriggers multiple re-renders and prop updates across all intermediate components, increasing INP and CPU usage.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Props drilling through many components	Many components receive and pass props	Multiple reflows triggered by each re-render	High paint cost due to repeated updates	[X] Bad
Using provide/inject or global store	Only components that consume data update	Single or minimal reflows triggered	Lower paint cost due to fewer updates	[OK] Good

Rendering Pipeline

Props drilling causes many components to receive new props and re-render, triggering multiple layout recalculations and paints.

→JavaScript Execution

→Style Calculation

→Layout

→Paint

⚠️ BottleneckJavaScript Execution and Layout due to repeated re-renders of intermediate components

Core Web Vital Affected

INP

This affects the rendering speed and responsiveness by increasing the number of component updates and re-renders due to passing props through many layers.

Optimization Tips

1Avoid passing props through components that don't need them.

2Use provide/inject or a global store to share data with deeply nested components.

3Fewer re-renders mean better interaction responsiveness (INP).

Performance Quiz - 3 Questions

What is the main performance problem caused by props drilling in Vue?

A Excessive CSS recalculations

B Too many DOM nodes created

C Unnecessary re-renders of intermediate components

D Blocking network requests

DevTools: Performance

How to check: Record a performance profile while interacting with the app. Look for many component re-renders and long scripting times related to prop updates.

What to look for: High scripting time and many repeated component renders indicate props drilling issues.