Components & Context

lazy

Defines a code-split component. The returned component triggers its dynamic import on first render and suspends through any enclosing <Loading> boundary while the chunk is in flight. Call .preload() to start the import early (e.g. On hover).

Import

import { lazy } from "solid-js";

Type signature

function lazy<T extends Component<any>>(
  fn: () => Promise<{ default: T }>,
  moduleUrl?: string
): T & { preload: () => Promise<{ default: T }>; moduleUrl?: string };

Parameters

`fn`

Dynamic import returning the module's default export

`moduleUrl`

Optional module URL used during hydration to look up preloaded chunks; usually injected by the bundler integration

Examples

const Profile = lazy(() => import("./Profile"));

function App() {
  return (
    <Loading fallback={<Spinner />}>
      <Profile id="42" />
    </Loading>
  );
}

// Preload before the user clicks
<button onMouseEnter={() => Profile.preload()}>Open profile</button>;

Last updated: 7/4/26, 6:21 PMEdit this pageReport an issue with this page