render

Render a Preact virtual node into a DOM element

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

Related APIs

• hydrate - Attach Preact to existing server-rendered markup
• h - Create virtual nodes
• Fragment - Render multiple children without a wrapper element