Menu
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?
522
SSR: @loadable/component provides a complete solution to make Server Side Rendering possible, whereas React. lazy is not an option when it comes to Server Side Rendering. Because Suspense is not available in Server-Side and React. lazy can only work with Suspense.
lazy() It is a new function in react that lets you load react components lazily through code splitting without help from any additional libraries. Lazy loading is the technique of rendering only-needed or critical user interface items first, then quietly unrolling the non-critical items later.
The benefits of lazy loading Faster initial loading: By reducing the page weight, lazy loading a web page allows for a faster initial page load time. Less bandwidth consumption: Lazy-loaded images save data and bandwidth, particularly useful for individuals who don't have fast internet or large data plans.
React Loadable is a library by @jamiebuilds that makes it easy to implement code splitting in React and that embraces React's component model. It accomplish its magic using dynamic imports and webpack automatically splits dynamic imports into separate chunks when bundling.
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.lazyand 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.
161
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.
33
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
