Lifecycle

onMount

onMount registers a function that runs once after the initial render for the current component or root.

Import

import { onMount } from "solid-js";

Type

function onMount(fn: () => void): void;

Parameters

`fn`

Type: () => void
Required: Yes

Non-tracking function executed once on mount.

Behavior

On the client, onMount runs once after the initial render. It does not run during server rendering.
fn does not track reactive dependencies.
Internally, onMount(fn) is equivalent to createEffect(() => untrack(fn)).
By the time onMount runs, refs have already been assigned.
Returning a function from fn does not register cleanup. Use onCleanup inside onMount when cleanup is needed.

note

"Mounted" in Solid refers to when a component is rendered within the reactive tree, not when it is physically inserted into the DOM. If you store JSX in a variable before conditionally rendering it, onMount runs when that JSX is evaluated, even if the elements have not yet been added to the visible page. Similarly, onCleanup runs based on the reactive ownership tree rather than DOM removal.

For cases where you need to detect actual DOM insertion or removal, consider using a ref callback or the Lifecycle primitives from solid-primitives.

Examples

Access a ref after mount

import { onMount } from "solid-js";

function MyComponent() {
  let ref: HTMLButtonElement;

  onMount(() => {
    ref.disabled = true;
  });

  return <button ref={ref}>Focus me!</button>;
}

Run one-time browser setup

import { onMount } from "solid-js";

function Example() {
  onMount(() => {
    // Browser-only code
    console.log(window.location.pathname);
  });

  return <div>Mounted</div>;
}

Last updated: 5/16/26, 6:58 AMEdit this pageReport an issue with this page