React.lazy supercharged

Aug 21, 2025

Very simple and powerful component to lazy load various components with different props.

This component takes in a loader prop, which allows it to import a component from the outside. Then it sticks that component in a useMemo, loads it with React.lazy, and renders that component with a Suspense boundary wrapping it. The component that we're working with is an imported fake-external-component that takes in a props.id and returns a simple divwith "hello" inside. We currently have some errors because the props are not typed correctly

import { lazy, Suspense, useMemo } from "react";

type Props = {
  loader: unknown;
};

/**
 * 1. This component is supposed to take a loader function that returns a
 * component, and render that component when it's loaded.
 *
 * But it's not typed correctly, and it's not generic enough.
 */
function LazyLoad({ loader, ...props }: Props) {
  const LazyComponent = useMemo(() => lazy(loader), [loader]);

  return (
    <Suspense fallback={"Loading..."}>
      <LazyComponent {...props} />
    </Suspense>
  );
}

LazyLoad is going to receive different props, so we need to make it generic. In this case, the part that needs to be dynamic is theComponentTypethat we're passing in.

import { lazy, Suspense } from 'react';

type LazyComponentProps<Component extends React.ComponentType<any>> = {
	loader: () => Promise<{ default: Component }>;
} & React.ComponentProps<Component>;

function LazyLoad<C extends React.ComponentType<any>>({
  loader,
  ...props
}: LazyComponentProps<C>) {
  const LazyComponent = useMemo(() => lazy(loader), [loader]);

  return (
    <Suspense fallback={"Loading..."}>
      <LazyComponent {...props} />
    </Suspense>
  );
}