Render a virtual node (or array of virtual nodes) into a DOM element. This function uses a diffing algorithm to efficiently update only the parts of the DOM that have changed.
Signature
export const render = (vlist, dom, ns) => { /* ... */ }
Parameters
The virtual node(s) to render. Can be a single VNode or an array of VNodes.
The DOM element to render into. This element becomes the container for the rendered virtual nodes.
Namespace URI for SVG nodes. Use "http://www.w3.org/2000/svg" when rendering SVG content.
Returns
void
Behavior
The render() function performs efficient DOM updates through:
- Diffing: Compares the new virtual node tree with the existing DOM
- Patching: Updates only the changed elements and properties
- Component Rendering: Evaluates functional components and manages their hooks
- Effect Execution: Runs
useEffect callbacks after rendering completes
- Cleanup: Calls cleanup functions for removed components
Examples
Basic Rendering
import { x, render } from '@zserge/o';
const app = x`<div><h1>Hello World</h1></div>`;
render(app, document.body);
Rendering a Component
import { x, render } from '@zserge/o';
const MyComponent = ({ name }) => x`
<div className="greeting">
<h1>Hello, ${name}!</h1>
</div>
`;
render(x`<${MyComponent} name="Alice" />`, document.body);
Re-rendering on State Change
import { x, render, useState } from '@zserge/o';
const Counter = () => {
const [count, setCount] = useState(0);
return x`
<div>
<p>Count: ${count}</p>
<button onclick=${() => setCount(count + 1)}>
Increment
</button>
</div>
`;
};
const app = x`<${Counter} />`;
const container = document.getElementById('app');
render(app, container);
Rendering SVG
import { x, render } from '@zserge/o';
const svgContent = x`
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
<circle cx="50" cy="50" r="40" fill="blue" />
</svg>
`;
render(svgContent, document.body);
Multiple Root Nodes
import { x, render } from '@zserge/o';
const Header = () => x`<header>Header</header>`;
const Main = () => x`<main>Content</main>`;
const Footer = () => x`<footer>Footer</footer>`;
// Render multiple components as siblings
render(
[
x`<${Header} />`,
x`<${Main} />`,
x`<${Footer} />`
],
document.body
);
- The render function reuses existing DOM nodes when possible
- Only changed properties are updated on existing elements
- Removed nodes are properly cleaned up, including their effect cleanup callbacks
- Functional components are memoized using implicit or explicit keys for efficient re-rendering