How does React.lazy support code splitting?

Direct answer

lazy defers loading a component's module until React first needs to render that component, allowing its code to be loaded on demand.

Editor.jsx

const MarkdownPreview = lazy(
  () => import("./MarkdownPreview.jsx")
);

function Editor() {
  return (
    <Suspense fallback={<Spinner />}>
      <MarkdownPreview />
    </Suspense>
  );
}

The lazy component suspends while its module is loading, so a surrounding Suspense boundary can render fallback UI.