lazy

lazy(() => import("./chart")) defines a component whose code loads on first render. While it loads, the nearest Suspense boundary around the place where it is rendered shows its fallback; without a boundary nothing is shown until it arrives. A failed load throws to the nearest ErrorBoundary, and the next render of the component retries. Lazy.preload() starts loading without rendering and resolves to the component. The module must have a default export that is the component.

export default function Chart(props: { points: number }) {
  return <p>chart: {props.points}</p>;
}

export function Preview() {
  return <Chart points={3} />;
}

More on boundaries, errors and retries: Suspense and resources.