Using React.lazy vs. webpack dynamic imports?

Question

I was wondering what the difference is between "declaring" dynamic imports using React.lazy() like:

const Component = React.lazy(() => import('./Component'));

Or doing it using webpack's dynamic imports like explained here: https://webpack.js.org/guides/code-splitting/#dynamic-imports

(In my case, i'm planning on doing the bundling in webpack anyway)

felixmosh · Accepted Answer · 2020-05-14 18:23:22Z

10

React.lazy gets a callback which returns a Promise, and returns a renderable component.

Webpacks dynamic imports returns a Promise which will be resolved when the chunk is loaded, therefore, you can't directly render it.

You can reimplement what React.lazy does, this is really basic implementation.

class SomeComponent extends React.Component {
  state = {LazyComponent: null};

  async componentDidMount() {
    const LazyComponent = await import('./path/to/LazyComponent');
    this.setState({LazyComponent});
  }
  render() {
    const {LazyComponent} = this.state;
    return LazyComponent ? <LazyComponent {...props} /> : null;
  }
}

answered May 14, 2020 at 18:23

felixmosh

35.8k10 gold badges81 silver badges99 bronze badges

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

2 Comments

Gambit2007 Over a year ago

So just to make sure i understand - i can't use Webpack dynamic imports for components? Only for third party libraries, since nothing that comes out of those dynamic imports is renderable?

felixmosh Over a year ago

Correct, You cannot render a promise,

Collectives™ on Stack Overflow

Using React.lazy vs. webpack dynamic imports?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related