SSR React Utilities

LazyLoadClientOnly.tsx

// Used like <LazyLoadClientOnly loader={() => import('/foo')} bar="baz" /> where `bar` is a prop of the `Foo` component.

import {
    ComponentProps,
    ComponentType,
    LazyExoticComponent,
    ReactNode,
    Suspense,
    lazy,
    useEffect,
    useRef,
    useState,
} from 'react';

type Props<T extends ComponentType<unknown>> = {
    loader: Parameters<typeof lazy<T>>['0'];
    fallback?: ReactNode;
};

export const LazyLoadClientOnly = <T extends ComponentType<unknown>>({
    loader,
    fallback,
    ...props
}: Props<T> & Omit<ComponentProps<T>, keyof Props<T>>) => {
    const [Component, setComponent] =
        useState<LazyExoticComponent<ComponentType<unknown>>>();

    // Using a ref to make sure the prop updating does not result in another lazy import
    const loaderRef = useRef(loader);
    useEffect(() => {
        setComponent(() => lazy(loaderRef.current));
    }, []);

    return (
        <Suspense fallback={fallback}>
            {Component ? <Component {...props} /> : fallback}
        </Suspense>
    );
};