1---
2title: Render Function Patterns and Performance
3impact: MEDIUM
4impactDescription: Render functions require explicit patterns for lists, events, v-model, and performance to stay correct and maintainable
5type: best-practice
6tags: [vue3, render-function, h, v-model, directives, performance, jsx]
7---
8 
9# Render Function Patterns and Performance
10 
11**Impact: MEDIUM** - Render functions are powerful but opt out of template compiler optimizations. Use them intentionally and apply the key patterns below to keep output correct and performant.
12 
13## Task List
14 
15- Prefer templates; use render functions only when templates cannot express the logic
16- Always add stable keys when rendering lists with `h()`/JSX
17- Use `withModifiers` / `withKeys` for event modifiers
18- Implement `v-model` via `modelValue` + `onUpdate:modelValue`
19- Apply custom directives with `withDirectives`
20- Use functional components for stateless presentational UI
21 
22## Prefer templates over render functions
23 
24**BAD:**
25```vue
26<script setup>
27import { h, ref } from 'vue'
28 
29const count = ref(0)
30const render = () => h('div', `Count: ${count.value}`)
31</script>
32```
33 
34**GOOD:**
35```vue
36<script setup>
37import { ref } from 'vue'
38 
39const count = ref(0)
40</script>
41 
42<template>
43  <div>Count: {{ count }}</div>
44</template>
45```
46 
47## Always add keys for list rendering
48 
49**BAD:**
50```javascript
51import { h, ref } from 'vue'
52 
53export default {
54  setup() {
55    const items = ref([{ id: 1, name: 'Apple' }])
56 
57    return () => h('ul',
58      items.value.map(item => h('li', item.name))
59    )
60  }
61}
62```
63 
64**GOOD:**
65```javascript
66import { h, ref } from 'vue'
67 
68export default {
69  setup() {
70    const items = ref([{ id: 1, name: 'Apple' }])
71 
72    return () => h('ul',
73      items.value.map(item => h('li', { key: item.id }, item.name))
74    )
75  }
76}
77```
78 
79## Use `withModifiers` / `withKeys` for event modifiers
80 
81**BAD:**
82```javascript
83import { h } from 'vue'
84 
85export default {
86  setup() {
87    const handleClick = (e) => {
88      e.stopPropagation()
89      e.preventDefault()
90    }
91 
92    return () => h('button', { onClick: handleClick }, 'Click')
93  }
94}
95```
96 
97**GOOD:**
98```javascript
99import { h, withModifiers, withKeys } from 'vue'
100 
101export default {
102  setup() {
103    const handleClick = () => {}
104    const handleEnter = () => {}
105 
106    return () => h('div', [
107      h('button', {
108        onClick: withModifiers(handleClick, ['stop', 'prevent'])
109      }, 'Click'),
110      h('input', {
111        onKeyup: withKeys(handleEnter, ['enter'])
112      })
113    ])
114  }
115}
116```
117 
118## Implement `v-model` explicitly
119 
120**BAD:**
121```javascript
122import { h, ref } from 'vue'
123import CustomInput from './CustomInput.vue'
124 
125export default {
126  setup() {
127    const text = ref('')
128    return () => h(CustomInput, { modelValue: text.value })
129  }
130}
131```
132 
133**GOOD:**
134```javascript
135import { h, ref } from 'vue'
136import CustomInput from './CustomInput.vue'
137 
138export default {
139  setup() {
140    const text = ref('')
141    return () => h(CustomInput, {
142      modelValue: text.value,
143      'onUpdate:modelValue': (value) => { text.value = value }
144    })
145  }
146}
147```
148 
149## Use `withDirectives` for custom directives
150 
151**BAD:**
152```javascript
153import { h } from 'vue'
154 
155const vFocus = { mounted: (el) => el.focus() }
156 
157export default {
158  setup() {
159    return () => h('input', { 'v-focus': true })
160  }
161}
162```
163 
164**GOOD:**
165```javascript
166import { h, withDirectives } from 'vue'
167 
168const vFocus = { mounted: (el) => el.focus() }
169 
170export default {
171  setup() {
172    return () => withDirectives(h('input'), [[vFocus]])
173  }
174}
175```
176 
177## Prefer functional components for stateless UI
178 
179**BAD:**
180```javascript
181import { h } from 'vue'
182 
183export default {
184  setup() {
185    return () => h('span', { class: 'badge' }, 'New')
186  }
187}
188```
189 
190**GOOD:**
191```javascript
192import { h } from 'vue'
193 
194function Badge(props, { slots }) {
195  return h('span', { class: 'badge' }, slots.default?.())
196}
197 
198Badge.props = ['variant']
199 
200export default Badge
201```
202