Render Functions & JSX

## What `h()` is `h()` (short for *hyperscript*) is the function Vue 3 exports from `vue` for creating **vnodes**: plain JavaScript objects that describe one node of the virtual DOM. A template is compiled into code that creates vnodes; a **render function** is you writing that code by hand. The docs note that a more descriptive name would be `createVNode()`, but a short name helps when you call it many times. ## The signature ```ts h(type, props?, children?) h(type, children?) // props omitted ``` | Argument | Accepts | Notes | |---|---|---| | `type` | a tag string (`'div'`) or a component definition | imported components are passed directly, no registration needed | | `props` | an object, or `null` | attributes, DOM properties, `class`, `style`, listeners, `key`, `ref` | | `children` | a string, a vnode, an array, or slot functions for components | arrays may mix strings and vnodes | The props object is **flat**, which is the main difference from Vue 2: - attributes and DOM properties sit side by side (`{ id: 'foo', innerHTML: 'hi' }`) and Vue decides how to set each one; the `.` and `^` prefixes force property or attribute binding; - `class` and `style` accept the same object and array forms as in templates; - event listeners are props named `on` plus a capitalized event name, such as `onClick`, the equivalent of `@click`; - every argument after `type` is optional, and with two arguments Vue works out whether the second one is props or children. ## Returning a render function from `setup()` With the Composition API, `setup()` normally returns an object whose bindings the template uses. A component without a template can instead **return a function**, and Vue uses that function as the component's render function: ```ts import { defineComponent, h, ref } from 'vue' export default defineComponent({ props: { msg: String }, setup(props) { const count = ref(1) return () => h('div', `${props.msg} ${count.value}`) } }) ``` Two rules make this work: 1. **`setup()` runs once per component instance**, while the returned function runs on every render. Everything that must stay current, including every `.value` read and every `props.x` read, belongs *inside* the returned function. 2. The render function runs inside the component's render effect, so the reactive values it reads are tracked, and changing them schedules a re-render of that component. The function may return a single vnode, a string, or an array for multiple root nodes. A `<script setup>` block cannot return a render function, so this style lives in a plain `setup()` option, or in `defineComponent()`'s function signature (Vue 3.3+), which takes the setup function directly and supports generics for TSX. ## Vnodes must be unique Every vnode in a rendered tree must be a distinct object. Rendering one vnode object in two positions is invalid per the Vue docs: a vnode describes *one* position, and once mounted it holds that position's DOM element and, for a component, its instance. The fix is a factory: ```ts h('div', Array.from({ length: 20 }).map(() => h('p', 'hi'))) ``` ## When Vue suggests reaching for it The Vue docs recommend templates by default: they are closer to HTML, and their deterministic syntax is easier to analyze statically, which lets the template compiler apply compile-time optimizations. Render functions are described as typically used in **reusable components with highly dynamic rendering logic**, where working with vnodes in plain JavaScript beats expressing the same logic in directives. In an interview, name a concrete case (an element whose tag is data-driven, a component that wraps or reorders its slot content) rather than "when I prefer JavaScript". ## Helpers that sit next to `h()` - `mergeProps()` combines several props objects with Vue's merging rules for `class`, `style` and listeners. - `cloneVNode()` copies a vnode, optionally merging in extra props. - `isVNode()` tells whether a value is a vnode. - `withModifiers()` wraps a listener to apply event modifiers such as `self`. ## Common mistakes - Building vnodes in the `setup()` body and returning `() => savedVnode`: the tree is frozen at its first state. - Passing Vue 2-style nested data (`{ on: { click } }`, `{ attrs: {...} }`, `{ domProps: {...} }`): Vue 3 reads it as ordinary props. - Expecting `h` as a parameter (`render(h)`): Vue 3 imports it from `vue`. - Reusing a vnode object in several places instead of creating one per position.