When would you use render functions or JSX instead of templates?

Question

Accepted Answer

Vue templates are compiled to **render functions** that return virtual DOM. Usually you write templates, but you can write the render function (or JSX) directly when you need the **full power of JavaScript** to generate the UI programmatically. ## A render function ```js import { h } from "vue"; // h = hyperscript: creates a virtual DOM node export default { props: ["level"], setup(props, { slots }) { // dynamically choose the tag — hard to express in a template return () => h(`h${props.level}`, slots.default()); // → renders an

}, }; ``` `h(tag, props, children)` builds vnodes imperatively. Here the heading level is computed at runtime to pick `h1`–`h6` — awkward with template syntax. ## JSX (with the Vue JSX plugin) ```jsx export default { props: ["items"], setup(props) { return () => (
{props.items.map((item) => item.visible ?
{item.name}
: null )}
); }, }; ``` JSX lets you use plain JS (`.map`, conditionals, variables) to build the tree — familiar to React developers and more flexible for highly dynamic structures. ## When render functions / JSX are worth it ```text ✓ Programmatic structure: a tag/component decided at runtime (dynamic headings, schema-driven UI) ✓ Highly conditional or recursive rendering hard to express with v-if/v-for ✓ Building reusable component libraries / higher-order components ✓ Rendering based on complex JS logic where template directives feel clumsy ``` ## When to stick with templates (the default) ```text ✓ Almost all app UI — templates are more readable, optimized by the compiler, and benefit from compile-time hints (static hoisting, patch flags) for performance ✓ Better tooling: IDE highlighting, type-checking, easier for the whole team ``` Notably, the template compiler adds performance optimizations (it knows what's static vs dynamic) that hand-written render functions don't get automatically. ## Why it matters Templates are the right default — readable, tooling-friendly, and compiler-optimized. But render functions/JSX are the escape hatch when UI must be generated programmatically (dynamic tags, recursive trees, library components) where template syntax becomes contorted. Knowing both exist — and that templates are preferred for typical app code while render functions suit dynamic/library scenarios — lets you pick the right tool without forcing one approach everywhere.