1---
2title: VNodes Must Be Unique in Render Functions
3impact: HIGH
4impactDescription: Reusing vnode references causes rendering bugs and unexpected behavior
5type: gotcha
6tags: [vue3, render-function, vnode, composition-api]
7---
8 
9# VNodes Must Be Unique in Render Functions
10 
11**Impact: HIGH** - Reusing the same vnode reference multiple times in a render function tree causes rendering bugs, where only one instance appears or updates behave unexpectedly.
12 
13Every vnode in a component's render tree must be unique. You cannot use the same vnode object multiple times. If you need to render the same element multiple times, create each vnode separately using a factory function or by calling `h()` in a loop.
14 
15## Task Checklist
16 
17- [ ] Never store a vnode in a variable and use it multiple times in the same tree
18- [ ] Use a factory function or `.map()` to create multiple similar vnodes
19- [ ] Each `h()` call creates a new vnode, so call it for each instance needed
20- [ ] Be especially careful when extracting vnode creation into helper functions
21 
22**Incorrect:**
23```javascript
24import { h } from 'vue'
25 
26export default {
27  setup() {
28    return () => {
29      // WRONG: Same vnode reference used twice
30      const p = h('p', 'Hello')
31      return h('div', [p, p]) // Bug! Duplicate vnode reference
32    }
33  }
34}
35```
36 
37```javascript
38import { h } from 'vue'
39 
40export default {
41  setup() {
42    return () => {
43      // WRONG: Reusing vnode in different parts of tree
44      const icon = h('span', { class: 'icon' }, '★')
45      return h('div', [
46        h('button', [icon, ' Save']),    // Uses icon
47        h('button', [icon, ' Delete'])   // Reuses same icon - Bug!
48      ])
49    }
50  }
51}
52```
53 
54**Correct:**
55```javascript
56import { h } from 'vue'
57 
58export default {
59  setup() {
60    return () => {
61      // CORRECT: Create new vnode for each use
62      return h('div', [
63        h('p', 'Hello'),
64        h('p', 'Hello')
65      ])
66    }
67  }
68}
69```
70 
71```javascript
72import { h } from 'vue'
73 
74export default {
75  setup() {
76    return () => {
77      // CORRECT: Factory function creates new vnode each time
78      const createIcon = () => h('span', { class: 'icon' }, '★')
79      return h('div', [
80        h('button', [createIcon(), ' Save']),
81        h('button', [createIcon(), ' Delete'])
82      ])
83    }
84  }
85}
86```
87 
88```javascript
89import { h } from 'vue'
90 
91export default {
92  setup() {
93    return () => {
94      // CORRECT: Using map to create multiple vnodes
95      return h('div',
96        Array.from({ length: 20 }).map(() => h('p', 'Hello'))
97      )
98    }
99  }
100}
101```
102 
103```javascript
104import { h } from 'vue'
105 
106export default {
107  setup() {
108    const items = ['Apple', 'Banana', 'Cherry']
109 
110    return () => h('ul',
111      // CORRECT: Each iteration creates a new vnode
112      items.map((item, index) =>
113        h('li', { key: index }, item)
114      )
115    )
116  }
117}
118```
119 
120## Why VNodes Must Be Unique
121 
122VNodes are lightweight JavaScript objects that Vue's virtual DOM algorithm uses for diffing and patching. When the same vnode reference appears multiple times:
123- Vue cannot differentiate between the instances
124- The diffing algorithm produces incorrect results
125- Only one instance may render, or updates may corrupt the DOM
126 
127Each vnode maintains its own identity and position in the tree, which is essential for:
128- Correct DOM patching during updates
129- Proper lifecycle hook execution
130- Accurate key-based reconciliation in lists
131 
132## Reference
133- [Vue.js Render Functions - Vnodes Must Be Unique](https://vuejs.org/guide/extras/render-function.html#vnodes-must-be-unique)
134