Lazy Loading and Code Splitting

As React applications grow in complexity, managing performance becomes essential. Large bundles can slow down initial load times, making the user experience less responsive. To address this, lazy loading and code splitting are two key techniques that allow React applications to load faster by breaking down large bundles into smaller, more manageable chunks.

Understanding Lazy Loading and Code Splitting

What is Lazy Loading?

Lazy loading is a design pattern that delays the loading of resources (such as components, images, or scripts) until they are needed. Instead of loading everything at once when a page is requested, resources are only loaded when the user interacts with the relevant part of the application.

What is Code Splitting?

Code splitting is the process of dividing the JavaScript bundle into smaller chunks. When code splitting is combined with lazy loading, these chunks are only loaded when they are required, improving both the performance and the user experience of a React application. Code splitting allows you to load parts of your application on demand rather than loading the entire app upfront.

The Need for Lazy Loading and Code Splitting

Performance Benefits

  1. Faster Initial Load Times: By only loading the code that is necessary for the initial screen, the app becomes usable faster.
  2. Reduced Bundle Size: Instead of bundling all the JavaScript files into a single, large file, lazy loading and code splitting break them down into smaller chunks, which are loaded only when needed.
  3. Improved User Experience: Loading components when they are needed, especially on-demand or when users navigate to different pages, ensures that users don’t experience long loading times or poor performance.

Common Use Cases

  1. Large Components: Lazy loading is useful for large components like charts, maps, or data tables that are not needed immediately when the app loads.
  2. Routes in a Single Page Application (SPA): React applications often use React Router, which can lazy load different pages or routes.
  3. Third-Party Libraries: Code splitting can also be applied to third-party libraries or dependencies that are only needed on certain parts of the app.

Lazy Loading Components in React

React provides built-in support for lazy loading using the React.lazy() function. Let’s explore how to use it with practical examples.

Basic Lazy Loading Example

The React.lazy() function allows us to load a component dynamically when it is needed. Let’s see how this works with an example.

Example:

				
					import React, { Suspense } from 'react';

// Lazy load the component
const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() {
  return (
    <div>
      <h1>Welcome to My App</h1>
      <Suspense fallback={<div>Loading...</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  );
}

export default App;

Explanation:

  • The React.lazy() function is used to import LazyComponent only when it is needed.
  • The Suspense component acts as a fallback UI that shows a loading state while the lazy-loaded component is being fetched.

Output:

  • Initially, the app will display “Loading…” as the LazyComponent is being fetched. Once it is loaded, the content of LazyComponent will be rendered.

Lazy Loading Multiple Components

You can also lazy load multiple components in the same way:

				
					import React, { Suspense } from 'react';

const LazyComponentOne = React.lazy(() => import('./ComponentOne'));
const LazyComponentTwo = React.lazy(() => import('./ComponentTwo'));

function App() {
  return (
    <div>
      <h1>Welcome</h1>
      <Suspense fallback={<div>Loading components...</div>}>
        <LazyComponentOne />
        <LazyComponentTwo />
      </Suspense>
    </div>
  );
}

export default App;

Explanation:

  • Both components are lazy-loaded, and the fallback Loading components... will be displayed until they are ready.

Code Splitting with React

React uses a popular tool called Webpack to bundle JavaScript files. Code splitting can be achieved using both Webpack and React’s features. The primary method to achieve code splitting in React is by using dynamic import() statements along with React.lazy().

React.lazy() and Webpack Code Splitting

When we use React.lazy() with dynamic imports, Webpack automatically creates separate bundles for the lazy-loaded components. Let’s see how this works in more detail.

Example:

				
					import React, { Suspense } from 'react';

const LazyHeader = React.lazy(() => import('./Header'));
const LazyFooter = React.lazy(() => import('./Footer'));

function App() {
  return (
    <div>
      <Suspense fallback={<div>Loading header...</div>}>
        <LazyHeader />
      </Suspense>
      <p>Main content of the app goes here...</p>
      <Suspense fallback={<div>Loading footer...</div>}>
        <LazyFooter />
      </Suspense>
    </div>
  );
}

export default App;

Explanation:

  • Webpack will split Header and Footer components into separate bundles. They will be loaded only when the user interacts with the corresponding part of the application.
  • The fallback message in Suspense indicates which component is being loaded at any given moment.

Dynamic Imports Without React.lazy()

In some cases, you may want to use dynamic imports without relying on React.lazy(). For example, when dealing with non-React components or other resources like scripts, you can still leverage dynamic imports:

				
					function loadScript() {
  import('./someLibrary')
    .then((module) => {
      const library = module.default;
      library.doSomething();
    })
    .catch((error) => {
      console.error("Failed to load library", error);
    });
}

function App() {
  return <button onClick={loadScript}>Load Script</button>;
}

export default App;

Explanation:

  • This approach demonstrates using dynamic imports for JavaScript modules that aren’t necessarily React components.
  • Clicking the button will dynamically import the module and execute the doSomething() function.

Lazy Loading Routes in React

In a single-page React application (SPA), routing is a common use case for lazy loading. You can lazy load entire pages or views, making the initial load faster while keeping the bundle size smaller.

Lazy Loading Routes with React Router

You can lazy load route components using React.lazy() with React Router.

Example:

				
					import React, { Suspense } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

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

function App() {
  return (
    <Router>
      <Suspense fallback={<div>Loading...</div>}>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
        </Switch>
      </Suspense>
    </Router>
  );
}

export default App;

Explanation:

  • The Home and About components are lazy-loaded when the user navigates to their respective routes.
  • The Suspense component ensures that the fallback UI is displayed while the components are being loaded.

Output:

  • When the user navigates to the /about page, the “About” component will load lazily, improving the performance by splitting routes into smaller bundles.

Advanced Concepts and Best Practices

Preloading Components

Preloading can be useful when you anticipate that the user will navigate to a specific part of the application. You can preload components so they are ready in the background.

Example:

				
					import React, { Suspense } from 'react';

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

// Preload the component
LazyComponent.preload();

function App() {
  return (
    <div>
      <h1>Welcome</h1>
      <Suspense fallback={<div>Loading...</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  );
}

export default App;

Explanation:

  • The LazyComponent.preload() function will preload the component when the app loads, but it will only render when needed. This can help reduce perceived loading times.

Error Boundaries for Lazy Loaded Components

When lazy loading components, network errors or other issues can prevent the component from loading correctly. React’s Error Boundaries can be used to catch these errors and display a fallback UI.

Example:

				
					import React, { Suspense } from 'react';

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

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError() {
    return { hasError: true };
  }

  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>;
    }
    return this.props.children;
  }
}

function App() {
  return (
    <div>
      <h1>Welcome</h1>
      <ErrorBoundary>
        <Suspense fallback={<div>Loading...</div>}>
          <LazyComponent />
        </Suspense>
      </ErrorBoundary>
    </div>
  );
}

export default App;

Explanation:

  • The ErrorBoundary component catches errors during rendering, providing a fallback UI if something goes wrong with the lazy-loaded component.

We explored lazy loading and code splitting in React from the basics to more advanced concepts. By using React.lazy(), Suspense, and dynamic imports, you can improve the performance of your React applications significantly by reducing initial load times and keeping the bundle size manageable. Happy Coding!❤️

Table of Contents

Home
Roadmap
ATS Resume
Playground
Resources