---
title: Return Render Function from setup(), Not Direct VNodes
impact: HIGH
impactDescription: Returning a vnode directly from setup makes it static; returning a function enables reactive updates
type: gotcha
tags: [vue3, render-function, composition-api, setup, reactivity]
---

# Return Render Function from setup(), Not Direct VNodes

**Impact: HIGH** - When using render functions with the Composition API, you must return a function that returns vnodes, not the vnodes directly. Returning vnodes directly creates a static render that never updates when reactive state changes.

## Task Checklist

- [ ] Always return an arrow function from setup() when using render functions
- [ ] Never return h() calls directly from setup()
- [ ] Ensure reactive values are accessed inside the returned function

**Incorrect:**
```js
import { h, ref } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const increment = () => count.value++

    // WRONG: Returns a static vnode, created once
    // Clicking the button updates count.value, but the DOM never changes!
    return h('div', [
      h('p', `Count: ${count.value}`),  // Captures count.value at setup time (0)
      h('button', { onClick: increment }, 'Increment')
    ])
  }
}
```

**Correct:**
```js
import { h, ref } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const increment = () => count.value++

    // CORRECT: Returns a render function
    // Vue calls this function on every reactive update
    return () => h('div', [
      h('p', `Count: ${count.value}`),  // Re-evaluated each render
      h('button', { onClick: increment }, 'Increment')
    ])
  }
}
```

## Why This Happens

```js
// What Vue does internally:

// WRONG approach - setup runs once:
const result = setup()
// result is a vnode { type: 'div', children: [...] }
// Vue renders this once, then has no way to re-render

// CORRECT approach - setup returns a function:
const renderFn = setup()
// renderFn is () => h('div', ...)
// Vue calls renderFn() on mount
// Vue calls renderFn() again whenever dependencies change
```

## Common Mistake: Mixing Template and Render Function

```vue
<script setup>
import { h, ref } from 'vue'

const count = ref(0)

// WRONG: Can't use render functions in script setup with templates
// This h() call does nothing
const node = h('div', count.value)
</script>

<template>
  <!-- Template is used, render function is ignored -->
  <div>{{ count }}</div>
</template>
```

If you need a render function with Composition API, don't use `<script setup>`:

```vue
<script>
import { h, ref } from 'vue'

export default {
  setup() {
    const count = ref(0)
    return () => h('div', count.value)
  }
}
</script>
<!-- No template - render function is used -->
```

## Exposing Values While Using Render Functions

```js
import { h, ref } from 'vue'

export default {
  setup(props, { expose }) {
    const count = ref(0)
    const reset = () => { count.value = 0 }

    // Expose methods for parent refs
    expose({ reset })

    // Still return the render function
    return () => h('div', count.value)
  }
}
```

## With Slots

```js
import { h, ref } from 'vue'

export default {
  setup(props, { slots }) {
    const count = ref(0)

    return () => h('div', [
      h('p', `Count: ${count.value}`),
      // Slots must also be called inside the render function
      slots.default?.()
    ])
  }
}
```

## Reference
- [Vue.js Render Functions with Composition API](https://vuejs.org/guide/extras/render-function.html#render-functions-jsx)
- [Vue.js Composition API setup()](https://vuejs.org/api/composition-api-setup.html)