Example of using React 18 Lazy to trigger code splitting when using an import map to render a Sanity-based list of components

lazy-component-map-react.jsx

import React, { Suspense } from "react";

const componentMap = {
  sectionOne: React.lazy(() => import("./SectionOne")),
  sectionTwo: React.lazy(() => import("./SectionTwo")),
};

const Section = ({ _type, ...sectionProps }) => {
  const SectionComponent = componentMap[_type];

  return (
    <Suspense fallback={<div>Loading section…</div>}>
      <SectionComponent {...sectionProps} />
    </Suspense>
  );
};

export default Section;

// Then, to render content:
const Content = ({ sections }) => (
  <div>
    {sections.map((section) => (
      <Section key={section._key} {...section} />
    ))}
  </div>
);