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>
    )
  }
}

score 4 · Answer 1 · answered Dec 29 '20 at 15:57

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')));

wonder if it would work with typescript.. – Code Drop Jul 05 '22 at 03:41 — Code Drop, Jul 05 '22 at 03:41

Elvis Duru · Answer 2 · 2022-07-12T22:40:21.987

Here's how to achieve it in TypeScript

import { Loader } from "../components/loader";
import { Suspense } from "react";

/**
 * HOC to wrap a component in a Suspense component.
 */

export default function withSuspense<P>(Component: React.ComponentType & any) {
  return function WithSuspense(props: P) {
    return (
      <Suspense fallback={<Loader />}>
        <Component {...props} />
      </Suspense>
    );
  };
}

score 0 · Accepted Answer · answered Jul 15 '20 at 13:14

0

you can try using already existing solutions like Loadable Components

answered Jul 15 '20 at 13:14

Dilshod Turobov

132
2
12

score 0 · Answer 4 · answered Jul 26 '23 at 18:35

this also worked for me:

import { Suspense, FC, LazyExoticComponent } from "react";

function withLoadable<P extends object>(Component: LazyExoticComponent<FC>) {
  return function Loadable(props: P) {
    return (
      <Suspense fallback={"loading"}>
        <Component {...props} />
      </Suspense>
    );
  };
}

export default withLoadable;

How to make a lazy loading high order component in React

4 Answers4