Component APIs

lazy

The lazy helper wraps a dynamic import and returns a component that loads on demand. Lazy components accept the same props as their eager counterparts and integrate with <Suspense> boundaries.

Import

import { lazy } from "solid-js";

Type

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

Parameters

`fn`

Type: () => Promise<{ default: T }>
Required: Yes

Dynamic import that resolves to the component module, exposing the component as the default export.

Return value

lazy returns a renderable component compatible with T. The component exposes a preload() method that resolves the underlying module.

Property	Type	Description
`preload`	`() => Promise<T>`	Loads the module without rendering and returns the resolved component.

Examples

Basic usage

import { lazy } from "solid-js";

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

function App(props: { title: string }) {
  return <ComponentA title={props.title} />;
}

Preloading nested lazy components

import { lazy } from "solid-js";
import type { Component } from "solid-js";

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

const ComponentWithPreload = () => {
  const [showNested, setShowNested] = createSignal(false);

  return (
    <div>
      <button
        onMouseEnter={() => Nested.preload()}
        onClick={() => setShowNested(true)}
      >
        Preload Nested Component
      </button>
      <Show when={showNested()}>
        <Nested />
      </Show>
    </div>
  );
};