Recursive components in Vue - Performance & Optimization

Performance: Recursive components

MEDIUM IMPACT

Recursive components impact rendering performance by increasing DOM depth and triggering multiple layout calculations during recursive rendering.

Rendering a nested tree structure with Vue recursive components

Vue

<template>
  <TreeNode :node="rootNode" />
</template>

<script setup>
import { reactive } from 'vue'
import TreeNode from './TreeNode.vue'
const rootNode = reactive({
  id: 1,
  children: [/* large nested data */]
})
</script>

<!-- TreeNode.vue -->
<script setup>
  defineOptions({
    name: 'TreeNode'
  })
  const props = defineProps({
    node: Object
  })
</script>
<template>
  <div>
    <span>{{ node.id }}</span>
    <template v-if="node.children && node.children.length">
      <TreeNode v-for="child in node.children" :key="child.id" :node="child" />
    </template>
  </div>
</template>

Adds conditional rendering to avoid unnecessary recursive calls and uses v-if to prevent rendering empty children, reducing DOM nodes.

📈 Performance GainReduces reflows by skipping empty branches; improves LCP by rendering fewer nodes initially.

Rendering a nested tree structure with Vue recursive components

Vue

<template>
  <TreeNode :node="rootNode" />
</template>

<script setup>
import { reactive } from 'vue'
import TreeNode from './TreeNode.vue'
const rootNode = reactive({
  id: 1,
  children: [/* large nested data */]
})
</script>

<!-- TreeNode.vue -->
<script setup>
  defineOptions({
    name: 'TreeNode'
  })
  const props = defineProps({
    node: Object
  })
</script>
<template>
  <div>
    <span>{{ node.id }}</span>
    <TreeNode v-for="child in node.children" :key="child.id" :node="child" />
  </div>
</template>

Rendering deeply nested recursive components causes many nested DOM nodes and multiple reflows during initial render.

📉 Performance CostTriggers N reflows where N is the total number of nodes; blocks rendering for large trees causing slow LCP.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Deep recursive rendering without conditions	High (many nested nodes)	High (one per node)	High (complex paint)	[X] Bad
Recursive rendering with conditional checks	Medium (skips empty nodes)	Medium (fewer reflows)	Medium (simpler paint)	[!] OK

Rendering Pipeline

Recursive components cause the browser to build a deep DOM tree, triggering multiple style calculations and layout passes as each nested component renders.

→Style Calculation

→Layout

→Paint

→Composite

⚠️ BottleneckLayout is most expensive due to deep nested DOM causing multiple reflows.

Core Web Vital Affected

LCP

Recursive components impact rendering performance by increasing DOM depth and triggering multiple layout calculations during recursive rendering.

Optimization Tips

1Avoid deep recursion without limits to prevent excessive layout recalculations.

2Use v-if or similar conditional rendering to skip empty or unnecessary recursive nodes.

3Flatten data structures if possible to reduce DOM depth and improve paint times.

Performance Quiz - 3 Questions

What is the main performance cost of using recursive components in Vue?

A Excessive JavaScript memory usage due to recursion

B Increased network requests for each recursive call

C Increased DOM depth causing multiple layout recalculations

D Slower CSS selector matching due to recursion

DevTools: Performance

How to check: Record a performance profile while loading the page with recursive components. Look for long scripting and layout times.

What to look for: High layout and scripting times indicate expensive recursive rendering. Check flame chart for repeated component calls.