Code splitting via pure React API components Suspense and Lazy
Homepage Repository npm Download
npm install react-pure-loadable@1.1.4
The react-pure-loadable is a lightweight library which provides lazy loading and code splitting through dynamic imports. It is a very thin wrapper around React's Suspense and Lazy API, when used as recommended in the React docs.
// accordion/index.js
import PureLoadable from 'react-pure-loadable';
export const Accordion = PureLoadable({
loader: () => import('./Accordion'),
loading: Spinner, // Optional: Defaults to null
displayName: 'Accordion', // Optional: The component will be easier to find in React Developer Tools
});
npm i --save react-pure-loadable
or
yarn add react-pure-loadable
The library depends on a peer dependency of React 16.6+, which was when Suspense was introduced.
As shown in the example, PureLoadable uses the familiar interface of the react-loadable. This makes it easy to switch from react-loadable if you already use it.
React-loadable was once the most popular library of this purpose, but it has not been maintained since July 2019, and it generates warnings about using the obsolete React API componentWillMount etc. With PureLoadable you are using the latest React API.
PureLoadable uses a smart way to catch both rendering and asynchronous import errors, so your UI won't crash if any of these happen.
The implementation of this library mostly follows the recommendations from React docs and adds a minimum increment to the bundle size. The following is the core of the implementation:
const TargetComponent = React.lazy(() => loader().catch(setLoaderError));
...
return (
<ErrorBoundary>
{({ error: boundaryError }) => (
<React.Suspense fallback={<LoadingComponent error={boundaryError || loaderError} />}>
<TargetComponent {...props} />
</React.Suspense>
)}
</ErrorBoundary>
);