Lazy Loading In ReactJS

Ever worked with or tried to understand the concepts of a web bundler like webpack or browserify? We often split the source code and import the dependencies where ever required. What we work in, is a code splitted environment where we code UI and business logic into different components and import them at the required places. In a broad terminology, this is known as modular programming. If you try inspecting your UI in a developer's tool, you can see all the components are loaded at once. This is because all the dependencies are bundled together and imported as a single file. This is known as bundling.

Now, as your app grows, your bundler will try to import all the dependencies including any third party packages and libraries installed, all at once. This might make your application to take an ample amount of time to load. Reactjs >=16.6 has introduced a common design pattern called lazy loading, which defers the initialization of an object until the point in the code where it is really needed. This might sound analogous to promises in js, but trust me this is going to save millions for your company.

React.lazy

lazy is a function to import your components dynamically. By dynamically, I mean the component is only loaded when it is needed.

import someComponent from './someComponent';

The above code snippet might be bundled by your bundler as a normal dependency. What we might want could be:

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

This is called dynamic importing. React.lazy() expects a promise. This promise resolves to a module. While this component is being loaded, you might need a fallback such as a loader.

Wrap the imported component with <Suspense></Suspense>. The component takes a fallback prop. The fallback is rendered meanwhile the dynamic import is resolved into a module.

import React from 'react';
import Loader from './loader';

const someComponent=React.lazy(()=>import('./someComponent'));
const otherComponent=React.lazy(()+.import('./otherComponent'));

export default ()=>{
return (
 <React.Suspense fallback={<Loader/>}>
   <someComponent/>
   <otherComponent/>
 </React.Suspense>
);
}

Instead of wrapping a whole component with component, you can wrap those sections of the component where lazy loading is to be applied. Adding further, there might a situation where a component may not be loaded due to technical issues such as a network error or gql error. In that case, global error handling can be done using ErrorBoundary.

Scenarios where you may need lazy loading

1. Routing : If your application is a SPA with multiple routes, you may need to load components only when they are routed.

2. To improve you app performance : You may not want your customers to experience a poor UI/UX experience by loading all heavy components at once.

3. Assets : If your application contains media files such as images and audio files, for eg in a music player app, you may want to load assets only when the end user needs it.

Limitations

Lazy loading feature is still not a usable feature is server-side rendered applications (SSR) . However, make use of reactjs provided Loadable components if needed.