React.lazy() vs React Loadable

Question

I was using react-loadable for some time for dynamic imports of my React components.

In the recent React release 16.6, the React team has included React.lazy() which also does a dynamic import.

Is there any benefit in using the react-loadable package still, or is it time to move to the new React version?

Patrick Hund · Accepted Answer · 2020-01-23T19:38:26.857

58

No, React Loadable should not be used anymore, because it is not being maintained.

It used to be the recommended way for lazy loading when rendering on the server side, while React.lazy only works on the client side.

The React team now recommends another library for server side rendering.

Quote from the React documentation:

Note: React.lazy and Suspense is not yet available for server-side rendering. If you want to do code-splitting in a server rendered app, we still recommend Loadable Components. It has a nice guide for bundle splitting with server-side rendering.

edited Jan 23 '20 at 19:38

answered Oct 29 '18 at 10:32

Patrick Hund

19,163
11
66
95

React-loadable – very popular, but unmaintained library. Made code spitting a popular thing. Issues are closed, so there is no community around and it is not compatible with Webpack v4+ and Babel v7+. If you use it, it is recommended to migrate to @loadable/component. – VnDevil Jan 23 '20 at 17:53
1

Thanks for the update, when I wrote this answer in 2018, react-loadable was still maintained and recommended – Patrick Hund Jan 23 '20 at 19:36
Good one. I also converted my old `React Loadable` code into `React.lazy(component)` with `Suspense` wrapper. – RaiBnod Jun 06 '20 at 07:43

score 2 · Answer 2 · answered Aug 22 '20 at 17:04

If you're doing SSR you'll want to consider using Loadable instead of React.lazy, as suggested by the official React.lazy docs:

React.lazy and Suspense are not yet available for server-side rendering. If you want to do code-splitting in a server rendered app, we recommend Loadable Components. It has a nice guide for bundle splitting with server-side rendering.

score 1 · Answer 3 · answered Apr 22 '22 at 11:55

1

As answered above, react-loadable is not maintained, now people would use @loadable/component. The module support various pattern.

Here is a clear Comparison:

For more detail, check here

answered Apr 22 '22 at 11:55

paulwen

278
2
7

React.lazy() vs React Loadable

3 Answers3