PreloadLazyComponents.js

import React from "react";

const Page1 = React.lazy(() => import("./Page1"));
const Page2 = React.lazy(() => import("./Page2"));
const Page3 = React.lazy(() => import("./Page3"));

const routes = [
    {
        Component: Page1,
        path: "page1",
    },
    {
        Component: Page2,
        path: "page2",
    },
    {
        Component: Page3,
        path: "page3",
    },
]
const PreloadLazyComponents = () => {
    const [actPreload, setActPreload] = React.useState(true);
    React.useEffect(() => {
        const t = setTimeout(() => {
            setActPreload(false);
        }, 3000);
        return () => {
            clearTimeout(t);
        };
    });

    if (actPreload)
        return (
            <div style={preloadStyles} hidden>
                {routes.map(Route => {
                    return <route.Component preload key={route.path} />;
                })}
            </div>
        );
};

export default React.memo(PreloadLazyComponents);

const preloadStyles = {
    maxHeight: 0,
    maxWidth: 0,
    opacity: 0,
    position: "absolute",
    top: "-100%",
    left: "-100%",
}