In larger React applications, it’s common to have components that are not immediately needed when the page loads. These components can increase the initial loading time and affect the performance of the application.

To mitigate this issue, React provides a feature called lazy-loading that allows us to load components on-demand, when they are actually needed.

What is lazy-loading?

Lazy-loading is a technique used in web development to defer the loading of non-critical resources until they are needed. Instead of loading everything upfront, lazy-loading allows us to load components dynamically, improving the initial loading time and overall performance of the application.

In React, lazy-loading is achieved by using the React.lazy function, which enables us to import components using dynamic imports.

How to use lazy-loading with suspense in React?

To use lazy-loading with suspense in React, follow these steps:

1. Import the Suspense component from React:

   import React, { Suspense } from 'react';
   

2. Import the component you want to lazy-load using dynamic import:

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

3. Wrap the lazy-loaded component inside the Suspense component. This component enables you to show a fallback UI while the lazy-loaded component is being loaded:

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

4. Render the App component in your root component:

   ReactDOM.render(<App />, document.getElementById('root'));
   

In the above example, when <App> is rendered, the <LazyComponent> will be loaded only when it’s needed. Until the component is loaded, the fallback UI, which in this case is a simple “Loading…” text, will be displayed.

Benefits of lazy-loading with suspense

Lazy-loading components with suspense offers several benefits, including:

• Improved initial loading time: By loading components only when they are actually needed, we reduce the initial bundle size and improve the page load speed.
• Better performance: With lazy-loading, our application becomes more efficient as we only load components when they are required, reducing unnecessary network requests.
• Simplified code organization: Lazy-loading allows us to split our application into smaller chunks, making the codebase more modular and easier to maintain.

Conclusion

Lazy-loading components with suspense in React is a powerful feature that allows us to optimize the loading time and performance of our applications. By dynamically loading components only when they are needed, we can improve the user experience and optimize resource utilization.