Code-Splitting and Lazy Loading with React.lazy and Suspense in React JS

Introduction

In modern web development, code-splitting is a technique used to split the code into smaller bundles, which are loaded as needed. This can significantly improve the performance of a React application by reducing the initial load time. React provides built-in support for code-splitting with React.lazy and Suspense.

Step 1: Understanding React.lazy

React.lazy is a function that enables dynamic import of components, which helps in code-splitting. With React.lazy, components are loaded only when they are needed (i.e., when they are rendered). This improves the initial loading performance of the application.

Example: Below is a basic example of how to use React.lazy to import a component dynamically:


  import React, { Suspense } from 'react';
  
  // Dynamically import the component
  const MyComponent = React.lazy(() => import('./MyComponent'));
  
  function App() {
      return (
          

              
Code-Splitting with React.lazy

              
                  
              
          

      );
  }
  
  export default App;

In this example, the MyComponent component is dynamically imported using React.lazy. The Suspense component wraps the lazy-loaded component and shows a loading message until the component is ready to render.

Step 2: Using Suspense for Fallback UI

The Suspense component is used to wrap the lazy-loaded component and provide a fallback UI while the component is being loaded. The fallback UI is typically a loading spinner or message that lets the user know that content is being fetched.

Example: In the code above, Suspense is used with a simple Loading... message as a fallback until MyComponent is loaded. This ensures a smooth user experience even when the component is loading asynchronously.

Step 3: Code-Splitting Multiple Components

You can apply code-splitting to multiple components by using React.lazy for each one. This allows different parts of your app to be loaded as needed, rather than loading everything upfront.

Example: Let's say you have two components, ComponentA and ComponentB, which should only be loaded when needed:


  import React, { Suspense } from 'react';
  
  // Dynamically import the components
  const ComponentA = React.lazy(() => import('./ComponentA'));
  const ComponentB = React.lazy(() => import('./ComponentB'));
  
  function App() {
      return (
          

            

              
<h1>Code-Splitting with Multiple Components</h1>

              
              <Suspense fallback={<div>Loading ComponentA...</div>}>

              
                  <ComponentA />

              
              </Suspense>

              
              <Suspense fallback={<div>Loading ComponentB...</div>}>

              
                  <ComponentB />

              
              </Suspense>

            

          

      );
  }
  
  export default App;

Here, ComponentA and ComponentB are loaded lazily using React.lazy and wrapped in separate Suspense components, each with its own fallback message.

Step 4: Using React.lazy with React Router

React.lazy works great with React Router to load pages or components lazily when users navigate to different routes in your application. This is an excellent way to optimize large single-page applications (SPAs) that have many different views or pages.

Example: Below is an example of using React.lazy to load different routes lazily:


  import React, { Suspense } from 'react';
  import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
  
  // Dynamically import pages
  const HomePage = React.lazy(() => import('./HomePage'));
  const AboutPage = React.lazy(() => import('./AboutPage'));
  
  

    
function App() {

    
      return (

    
          <Router>

    
              <div>

    
                  <h1>React Router with Code-Splitting</h1>

    
                  <Suspense fallback={<div>Loading...</div>}>

    
                      <Switch>

    
                          <Route exact path="/" component={HomePage} />

    
                          <Route path="/about" component={AboutPage} />

    
                      </Switch>

    
                  </Suspense>

    
              </div>

    
          </Router>

    
      );

    
  }

    
 

    
  export default App;

In this example, HomePage and AboutPage are loaded lazily when the user navigates to their respective routes. The Suspense component ensures that a loading message is displayed while the page is being loaded.

Step 5: Handling Errors in Lazy Loading

When working with lazy loading, it is important to handle errors in case the component fails to load (for example, due to network issues or an incorrect file path).

Example: You can use ErrorBoundary to catch errors that may occur during the loading process:


          import React, { Suspense } from 'react';
            const MyComponent = React.lazy(() => import('./MyComponent'));
            class ErrorBoundary extends React.Component {
                state = { hasError: false };
                static getDerivedStateFromError() {
                    return { hasError: true };
                componentDidCatch(error, info) {
                    console.log('Error loading component:', error, info);
                render() {
                    if (this.state.hasError) {
                        return <div>Something went wrong while loading the component.</div>;
                    }
                    return this.props.children;
                }
            }
            function App() {
                return (
                    <div>
                        <h1>Handling Errors with Lazy Loading</h1>
                        <ErrorBoundary>
                            <Suspense fallback={<div>Loading...</div>}>
                                <MyComponent />
                            </Suspense>
                        </ErrorBoundary>
                    </div>
                );
            }
            export default App;

In this example, the ErrorBoundary component catches any errors that occur during the lazy loading of MyComponent and displays a fallback error message.

Conclusion

Code-splitting and lazy loading in React with React.lazy and Suspense are powerful techniques to improve the performance of your application by loading only the components needed at any given time. By using these features, you can significantly reduce the initial load time and enhance the user experience in large React applications.




Advertisement