NoSSR lazy loader

NoSSRLoad.tsx

import React, { PropsWithChildren, useEffect, useState } from 'react';

export default function NoSSRLoad<T extends React.ComponentType<PropsWithChildren<any>>>(loader: () => Promise<{ default: T }>) {
    const NoSSRLoadWrap = (props) => {
        const [Component, setComponent] = useState<T>();
        useEffect(() => {
            // Don't use: loader().then((m) => setComponent(m.default));
            // When m.default is function, set state of a function will be treated as an updater function, just like setAge(age => age+1);
            // That's not what you want.
            loader().then((m) => setComponent(() => m.default));
        }, []);

        if (!Component) {
            return props.children || null;
        }

        return React.createElement(Component, props);
    };
    return NoSSRLoadWrap as T;
}