React.lazy pattern using Loadable Components

Question

I have the following scenario where I don't know ahead of time which component to load. The solution of which is as follows using React.lazy

import React, { lazy, Suspense } from "react";

export default class CallingLazyComponents extends React.Component {
  render() {

    var ComponentToLazyLoad = null;

    if(this.props.name == "A") { 
      ComponentToLazyLoad = lazy(() => import("./AComponent"));
    } else if(this.props.name == "B") {
      ComponentToLazyLoad = lazy(() => import("./BComponent"));
    }
    return (
        <div>
            <h1>This is the Base User: {this.state.name}</h1>
            <Suspense fallback={<div>Loading...</div>}>
                <ComponentToLazyLoad />
            </Suspense>
        </div>
    )
  }
}

How can I achieve the same using Loadable Components

I guess the best course is https://loadable-components.com/docs/dynamic-import/ — devAhsan, Jun 19 '20 at 07:53

score 0 · Answer 1 · answered Jun 19 '20 at 08:04

0

I believe the best solution to your problem is to keep using React.lazy as is recommended by the author of loadable-components since "it is not maintained any more and it is not compatible with Webpack v4+ and Babel v7+"

answered Jun 19 '20 at 08:04

Alizoh

1,562
1
13
16

1

I think you are mentioning react-loadable. I am using @loadable/component – devAhsan Jun 19 '20 at 10:30

React.lazy pattern using Loadable Components

1 Answers1