createRoot

Creates a detached reactive root. The callback receives a dispose() function which, when called, tears down every signal, memo, effect, and onCleanup registered inside the root.

Use this to host long-lived reactive scopes outside of a component (custom controllers, app bootstrapping, tests). Inside a component, prefer letting Solid's component lifecycle own things.

render() creates the root for normal app code. Reach for createRoot in tests, libraries, or non-render entry points that need to host a reactive scope.

Import

import { createRoot } from "solid-js";

Type signature

function createRoot<T>(
  init: ((dispose: () => void) => T) | (() => T),
  options?: { id?: string; transparent?: boolean }
): T;

Examples

const dispose = createRoot((dispose) => {
  const [n, setN] = createSignal(0);
  createEffect(
    () => n(),
    (value) => console.log(value)
  );
  setInterval(() => setN((x) => x + 1), 1000);
  return dispose;
});

// Later, to tear everything down:
dispose();