Lazy Loading in React

Lazy loading is a design approach that helps speed up your application’s initial loading time. It works by loading only the essential parts of your app when it starts, such as user login and registration components.

As users navigate through your app, additional components are loaded as needed. While the difference might not be noticeable in smaller apps, it has a substantial impact on larger ones, enhancing both user experience and overall performance.

Advantages of Lazy Loading

• Reduces initial loading time by reducing the bundle size.
• Reduces browser workload.
• Improves application performance in low bandwidth situations.
• Improves user experience at initial loading.
• Optimizes resource usage.

Disadvantages of Lazy Loading

• Not suitable for small-scale applications.
• Placeholders can slow down quick scrolling.
• Requires additional communication with the server to fetch resources.
• Can affect SEO and ranking.

Implementing Lazy Loading with React

Lazy loading is a technique that is not commonly used in React applications, especially for single-page applications. In the early stages of development, bundling the entire code into a single bundle and deploying it is a straightforward approach. However, as your application grows in complexity, you need to consider performance and user experience. In such cases, implementing lazy loading techniques in React becomes important. To achieve this, you can leverage modern tools like Webpack and Babel to structure your application in a modular fashion and then use code splitting to divide the application bundle into smaller, loadable parts.

React introduced two native features with the release of version 16.6 to facilitate lazy loading in React applications. These features use code splitting and dynamic imports to make lazy loading straightforward.

Let’s delve into how you can implement lazy loading in React:

React.lazy()

The React.lazy() function allows you to create components using dynamic imports and render them as regular components. When such a component is rendered, it automatically loads the bundle containing that component.

To use React.lazy(), provide a single input parameter: a function that returns a promise after loading the component using import(). The promise returned by React.lazy() will provide you with a module containing the React component with a default export. Here's how you can use it:

1// Without React.lazy()
2import AboutComponent from './AboutComponent';
3
4// With React.lazy()
5const AboutComponent = React.lazy(() => 

React.Suspense

When you use lazy loading, components are loaded as you navigate through your application. To handle this scenario, React introduced React.Suspense, which serves as a wrapper for lazy-loaded components. You can wrap a single lazy component, multiple lazy components, or even multiple nested lazy components with different hierarchy levels using React.Suspense. It accepts a fallback prop, which serves as a placeholder while the lazy component is loading. For instance, you can display a "Please Wait..." message as the fallback:

1import React, { Suspense } from "react";
2
3const AboutComponent = React.lazy(() => import('./AboutComponent'));

To avoid potential issues with promise rejections when using React.lazy(), consider creating a React error boundary component and wrapping Suspense components with it.

1import React, { Suspense } from "react";
2import ErrorBoundary from "./error.boundary.js";
3
4const AboutComponent = React.lazy(

Considerations for Lazy Loading

It’s important to use lazy loading judiciously. Small applications with a minimal bundle size may not benefit significantly from lazy loading, as splitting such a small bundle can lead to unnecessary complexity without clear advantages. Additionally, certain types of applications, like e-commerce sites, may suffer from lazy loading, negatively impacting user experiences, especially when users want fast scrolling through items. Therefore, carefully assess your application’s requirements, scale, and performance before opting for lazy loading.

Summary

In summary, this article has explored what lazy loading is, how to implement it in React, and the considerations you should keep in mind when deciding whether to use it. We hope this information helps you enhance your understanding of React lazy loading.