mount()

Mount a component tree into a DOM container.

const unmount = mount(element, container)

Parameters

Parameter	Type	Description
`element`	`VNodeChild`	A component element, typically created by JSX. A real DOM node, a string, a number, an array or a thunk is also accepted. For advanced use, can also be created via h().
`container`	`Element \| string`	The DOM element to mount into. If a string is provided, it is used as a CSS selector passed to `document.querySelector()`.

Returns

An unmount function that disposes all reactive effects and clears the container.

Return	Type	Description
`unmount`	`() => void`	Walks the container's subtree and disposes everything anchored to it: component contexts, `useEffect` / query / animation disposers, `onCleanup` callbacks, reactive child effects and reactive prop effects. Then empties the container element.

Usage

Basic Mount

import { mount } from 'what-framework';

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

mount(<App />, '#app');

With a DOM Element

const container = document.getElementById('root');
mount(<App />, container);

Unmounting

const unmount = mount(<App />, '#app');

// Later: clean up everything
unmount();

Re-mounting

// mount() automatically cleans up any previous mount
// in the same container before rendering the new tree.
mount(<AppV1 />, '#app');

// This disposes AppV1 and mounts AppV2
mount(<AppV2 />, '#app');

Typical Entry Point

// src/main.jsx: the standard entry point
import { mount } from 'what-framework';
import { App } from './App';

mount(<App />, document.getElementById('app'));

How It Works

Disposes any existing component tree in the container (via disposeTree)
Clears the container's content
Converts the element tree into real DOM nodes (via createDOM)
Appends the resulting DOM to the container

The returned unmount function reverses this: it walks the container's subtree, disposes every effect and cleanup callback anchored to a node in it, then empties the container. Being anchored to a node is what makes something reachable, so a bare effect() in a component body, which is anchored to nothing, survives and must be disposed by hand.

Notes

mount() clears the container before rendering. Existing content is removed.
If a previous component tree was mounted in the same container, its component contexts, hook cleanups and onCleanup callbacks are disposed before the new tree is created. A bare effect() written in a component body is not among them: it is not registered with the component, so pair it with onCleanup(dispose) yourself.
The string selector form uses document.querySelector(). Make sure the element exists in the DOM before calling mount(). If the selector matches nothing, mount() throws TypeError: Cannot set properties of null (setting 'textContent') from inside the DOM layer, which points at the framework rather than at your selector.
This is the primary entry point for What applications. Every app calls mount() once in its entry file.
For a server-rendered page use hydrate(element, container) from what-framework instead. It reuses the server's DOM rather than clearing it. The server half is renderToString / renderToHydratableString / renderToStream from what-framework/server. See the SSR guide.

Previous h() (Advanced) Next <Show>