Comparison with React.lazy

What are the differences between React.lazy and @loadable/components?

React.lazy is the recommended solution for Code Splitting. It uses Suspense and it is maintained by React.

If you are already using React.lazy and if you are good with it, you don't need @loadable/component.

If you feel limited or if you need SSR, then @loadable/component is the solution.

Comparison table

Library	Suspense	SSR	Library splitting	import(`./${value}`)
`React.lazy`	✅	❌	❌	❌
`@loadable/component`	✅	✅	✅	✅

Suspense

Suspense is supported by React.lazy and by @loadable/component. @loadable/component can also be used without Suspense.

Server Side Rendering

Suspense is not available server-side and React.lazy can only work with Suspense. That's why today, React.lazy is not an option if you need Server Side Rendering.

@loadable/component provides a complete solution to make Server Side Rendering possible.

Library splitting

@loadable/component supports library splitting using render props. This is not possible with React.lazy.

Full dynamic import

Full dynamic import also called agressive code splitting is a feature supported by Webpack. It consists of passing a dynamic value to the dynamic import() function.

// All files that could match this pattern will be automatically code splitted.
const loadFile = file => import(`./${file}`)

In React, it permits to create reusable components:

import loadable from '@loadable/component'
const AsyncPage = loadable(props => import(`./${props.page}`))
function MyComponent() {
  return (
    <div>
      <AsyncPage page="Home" />
      <AsyncPage page="Contact" />
    </div>
  )
}

This feature is not supported by React.lazy.

Note about `react-loadable`

react-loadable was the recommended way for React code splitting for a long time. However, today it is not maintained any more and it is not compatible with Webpack v4+ and Babel v7+.

If you use it, it is recommended to migrate to React.lazy or @loadable/component.

Loadable Components