DEV Community

Cover image for The 5 Practical Uses of Lazy Loading in React
Vijay
Vijay

Posted on

The 5 Practical Uses of Lazy Loading in React

Building complex React apps? Lazy loading offers a powerful solution for optimized performance.

React applications can become hefty, impacting initial load times. Lazy loading offers a solution by strategically deferring component loading, resulting in a faster and more responsive user experience.

Here are 5 practical ways to leverage Lazy Loading in React, along with code examples:

1. Enhance Initial Load Time

  • Reduce the initial bundle size by loading non-critical components on demand.
  • This ensures users see the core content faster and minimizes initial wait times.
  • Imagine an e-commerce site. Lazy load product details pages to prioritize the product listing on the initial load.
const ProductDetails = React.lazy(() => import('./ProductDetails'));

function ProductList() {
  const [productId, setProductId] = useState(null);

  const handleProductClick = (id) => setProductId(id);

  return (
    <div>
      {/* List of products */}
      <ul>
        {/* ... */}
        <li onClick={() => handleProductClick(1)}>Product 1</li>
        {/* ... */}
      </ul>
      {productId && (
        <Suspense fallback={<div>Loading...</div>}>
          <ProductDetails productId={productId} />
        </Suspense>
      )}
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

2. Improve Performance on Slow Connections

  • By only loading components in view, lazy loading minimizes data transferred on slower connections.
  • This translates to a smoother user experience for users with limited bandwidth.
  • Think about a news app. Don't load comment sections on every article initially, but only when a user clicks to view them.
const Comments = React.lazy(() => import('./Comments'));

function Article(props) {
  const [showComments, setShowComments] = useState(false);

  return (
    <div>
      <h2>{props.title}</h2>
      <p>{props.content}</p>
      <button onClick={() => setShowComments(true)}>View Comments</button>
      {showComments && (
        <Suspense fallback={<div>Loading...</div>}>
          <Comments articleId={props.id} />
        </Suspense>
      )}
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

3. Optimize Complex UIs with Many Features

  • Break down complex UIs into smaller, lazy-loaded components.
  • This improves maintainability and reduces the initial bundle size for large applications.
  • A complex data visualization dashboard can benefit from lazy loading specific charts based on user interactions.
const Chart1 = React.lazy(() => import('./Chart1'));
const Chart2 = React.lazy(() => import('./Chart2'));

function Dashboard() {
  const [selectedChart, setSelectedChart] = useState('chart1');

  return (
    <div>
      <button onClick={() => setSelectedChart('chart1')}>Chart 1</button>
      <button onClick={() => setSelectedChart('chart2')}>Chart 2</button>
      {selectedChart === 'chart1' && (
        <Suspense fallback={<div>Loading...</div>}>
          <Chart1 />
        </Suspense>
      )}
      {selectedChart === 'chart2' && (
        <Suspense fallback={<div>Loading...</div>}>
          <Chart2 />
        </Suspense>
      )}
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

4. Manage Third-Party Libraries Strategically

  • Defer loading of third-party libraries that are not crucial for initial rendering.
  • This helps prioritize core functionality and reduces initial load times, especially for libraries with large footprints.
  • Consider lazy loading a social media sharing widget that might not be used on every page.
const SocialShare = React.lazy(() => import('./SocialShare'));

function ProductPage() {
  // ... product details
  return (
    <div>
      {/* Product details */}
      <Suspense fallback={<div>Loading...</div>}>
        <SocialShare />
      </Suspense>
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

5. Enhance Code Splitting for Large Applications

  • Lazy loading complements code splitting, a technique to break down the application codebase into smaller bundles.
  • This allows for on-demand loading of specific code sections along with their corresponding lazy-loaded components.
  • Leverage lazy loading and code splitting together for a granular approach to optimized loading in complex React applications.

By incorporating lazy loading into your React development strategy, you can create performant, user-centric applications that deliver a seamless experience across various devices and network connections.

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more