Skip to main content
Renders a Preact virtual node into a DOM container element.

​
Signature

function render(
  vnode: ComponentChild,
  parent: ContainerNode
): void

​
Parameters

​
vnode
ComponentChild
required
The virtual node to render. Can be a VNode, string, number, boolean, null, undefined, or arrays of these types.
​
parent
ContainerNode
required
The DOM element to render into. This will become the parent container for the rendered content.

​
Return Value

Returns void. The function performs a side effect by rendering content into the DOM.

​
Description

The render function is the primary way to mount a Preact application to the DOM. It takes a virtual node tree and renders it into a specified DOM container. Key behaviors:
  • If parent is document, it automatically uses document.documentElement instead
  • Supports multiple calls on the same DOM node by tracking previous renders via _children property
  • Creates a root Fragment wrapper around the vnode
  • Handles both initial mounting and updates to existing trees

​
Usage Examples

​
Basic Rendering

import { render, h } from 'preact';

function App() {
  return <div>Hello World!</div>;
}

render(<App />, document.getElementById('root'));

​
Rendering Multiple Times

import { render, h } from 'preact';

const container = document.getElementById('root');

// Initial render
render(<div>First render</div>, container);

// Subsequent render updates the same container
render(<div>Updated render</div>, container);

​
Rendering Text and Primitives

import { render } from 'preact';

const container = document.getElementById('root');

// Render a string directly
render('Hello World', container);

// Render a number
render(42, container);

// Render null (clears the container)
render(null, container);

​
Implementation Details

The render function is implemented in src/render.js:12. When called:
  1. Checks if parent is document and uses documentElement instead
  2. Invokes options._root hook if present
  3. Wraps the vnode in a Fragment to create a consistent root
  4. Calls the internal diff algorithm to reconcile changes
  5. Commits all effects via commitRoot
  • hydrate - Attach Preact to existing server-rendered markup
  • h - Create virtual nodes
  • Fragment - Render multiple children without a wrapper element

Build docs developers (and LLMs) love

Get started for freeTalk to us