How to make a lazy loading high order component in React

Question

So here is the main idea, HOC that is be able to load any wrapped in component with React.lazy and React.Suspense. Is it possible??? So, I already was able to write some, but not sure that I was able to made properly...

import React, { Suspense, lazy, useState, useEffect } from "react"

export function withLazyImport(LazyComponent) {
  return (props) => {
    const [loadedComponent, setLoadedComponent] = useState(null)

    useEffect(() => {
      setLoadedComponent(lazy(() => import(<LazyComponent {...props} />)))
      //eslint-disable-next-line
    }, [])

    return (
      <Suspense fallback="Lazy component is loading ...">
        {loadedComponent}
      </Suspense>
    )
  }
}

Answer 1

I don't understand why do you use useEffect. The resulted component will not pass new props to the lazy component because props are passed on did mount.

I came up with another solution based on the example provided by the author of this question

import React, { Suspense } from 'react';

export const withLazyComponent = (LazyComponent) => {
  return (props) => (
    <Suspense fallback="Lazy component is loading ...">
      <LazyComponent {...props} />
    </Suspense>
  )
}

And then you use it like:

const LazyComponent = withLazyComponent(React.lazy(() => import('path/to/component')));