{
  "id": "e1fbce3996389b2c4666191c",
  "source": "solid:signals",
  "type": "github-document",
  "title": "lazy",
  "content": "---\ntitle: lazy\nuse_cases: \u003e-\n  code splitting, performance optimization, reducing bundle size, dynamic\n  imports, route-based splitting, lazy loading\ntags:\n  - lazy-loading\n  - code-splitting\n  - performance\n  - suspense\n  - optimization\n  - imports\nversion: '1.0'\ndescription: \u003e-\n  Lazy load components with code splitting to reduce bundle size and improve\n  performance. Components load on-demand and integrate with Suspense.\n---\n\nThe `lazy` helper wraps a dynamic import and returns a component that loads on demand.\nLazy components accept the same props as their eager counterparts and integrate with `\u003cSuspense\u003e` boundaries.\n\n## Import\n\n```tsx\nimport { lazy } from \"solid-js\"\n```\n\n## Type\n\n```tsx\nfunction lazy\u003cT extends Component\u003cany\u003e\u003e(\n  fn: () =\u003e Promise\u003c{ default: T }\u003e\n): T \u0026 { preload: () =\u003e Promise\u003cT\u003e }\n```\n\n## Parameters\n\n### `fn`\n\n- **Type:** `() =\u003e Promise\u003c{ default: T }\u003e`\n- **Required:** Yes\n\nDynamic import that resolves to the component module, exposing the component as the `default` export.\n\n## Return value\n\n`lazy` returns a renderable component compatible with `T`.\nThe component exposes a `preload()` method that resolves the underlying module.\n\n| Property | Type | Description |\n| -------- | ---- | ----------- |\n| `preload` | `() =\u003e Promise\u003cT\u003e` | Loads the module without rendering and returns the resolved component. |\n\n## Examples\n\n### Basic usage\n\n```tsx title=\"app.tsx\"\nimport { lazy } from \"solid-js\"\n\nconst ComponentA = lazy(() =\u003e import(\"./ComponentA\"))\n\nfunction App(props: { title: string }) {\n  return \u003cComponentA title={props.title} /\u003e\n}\n```\n\n### Preloading nested lazy components\n\n```tsx\nimport { lazy } from \"solid-js\"\nimport type { Component } from \"solid-js\"\n\nconst Nested = lazy(() =\u003e import(\"./Nested\"))\n\nconst ComponentWithPreload = () =\u003e {\n  const [showNested, setShowNested] = createSignal(false)\n\n  return (\n\t\u003cdiv\u003e\n\t  \u003cbutton\n        onMouseEnter={() =\u003e Nested.preload()}\n        onClick={() =\u003e setShowNested(true)}\n      \u003ePreload Nested Component\u003c/button\u003e\n      \u003cShow when={showNested()}\u003e\n\t    \u003cNested /\u003e\n      \u003c/Show\u003e\n\t\u003c/div\u003e\n  )\n}\n```\n\n## See also\n\n- [`Suspense`](https://docs.solidjs.com/reference/components/suspense)\n- [Router preloading guide](/solid-router/advanced-concepts/preloading)",
  "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/component-apis/lazy.mdx",
  "metadata": {
    "path": "src/routes/reference/component-apis/lazy.mdx",
    "repo": "solidjs/solid-docs",
    "repo_url": "https://github.com/solidjs/solid-docs.git",
    "size": 2244,
    "source_type": "github"
  },
  "hash": "ac376f53acbaf7cc6e930e98520819808e3f9730c7de8b71e44c9db5e970a96f",
  "timestamp": "2026-02-23T11:43:00.18876908+01:00"
}