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

Pavlo Kozlov · Accepted Answer · 2020-12-29 15:57:01Z

4

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

answered Dec 29, 2020 at 15:57

Pavlo Kozlov

1,1111 gold badge12 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Code Drop Over a year ago

wonder if it would work with typescript..

Elvis Duru · Accepted Answer · 2022-07-12 22:40:21Z

1

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

edited Jul 12, 2022 at 22:40

answered Jul 12, 2022 at 22:38

Elvis Duru

114 bronze badges

Comments

Dilshod Turobov · Accepted Answer · 2020-07-15 13:14:52Z

0

you can try using already existing solutions like Loadable Components

answered Jul 15, 2020 at 13:14

Dilshod Turobov

1273 silver badges14 bronze badges

Comments

Amir Rezvani · Accepted Answer · 2023-07-26 18:35:54Z

0

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;

answered Jul 26, 2023 at 18:35

Amir Rezvani

1,52313 silver badges41 bronze badges

Collectives™ on Stack Overflow

How to make a lazy loading high order component in React

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related