render

Renders a component tree into a DOM element. Returns a dispose function that tears the tree down and cleans up reactive scopes when called.

Import

import { render } from "@solidjs/web";

Type signature

function render(
  code: () => JSX.Element,
  element: MountableElement,
  init?: unknown,
  options: { renderId?: string } = {}
): () => void;

Remarks

The top-level insert is queued via insertOptions: { schedule: true } so its initial DOM attach goes through the effect queue rather than executing inline. This lets the mount participate in transitions: if an uncaught async read surfaces during the initial render (no Loading ancestor absorbs it), the mount is held by the transition and attaches atomically once all pending settles. On the no-async happy path the tail flush() drains the queued callback so the attach is synchronous by the time render() returns. The dev enforcement window scopes ASYNC_OUTSIDE_LOADING_BOUNDARY to the initial mount only.

Examples

import { render } from "@solidjs/web";

const dispose = render(() => <App />, document.getElementById("root")!);

// Later, to unmount:
dispose();