Lazy Loading in React: 3 Practical Examples

Understanding Lazy Loading in React

Lazy loading is a technique that allows you to load components only when they are needed, rather than at the initial load of your application. This can greatly improve performance, especially in larger applications with many components. By implementing lazy loading, you can ensure that users only download the code they need, when they need it.

Example 1: Lazy Loading a Component with React.lazy

Use Case

Imagine you have a large application with a settings page that isn’t required on the initial load. By lazy loading this component, you can reduce the initial loading time for your users.

import React, { Suspense, lazy } from 'react';

const Settings = lazy(() => import('./Settings'));

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

In this example, we use React.lazy() to import the Settings component only when it’s needed. The Suspense component wraps the lazy-loaded component and displays a fallback loading message until the component is ready.

Notes

• Ensure that your component is exported as a default export.
• You can replace the fallback with any loading spinner or message.

Example 2: Lazy Loading Routes with React Router

Use Case

If your application has multiple routes, you can lazy load each route to improve performance. This is especially useful in single-page applications where users might not visit every route.

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

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

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

This example demonstrates how to lazy load multiple components based on the route. Each route only loads its corresponding component when navigated to, reducing the initial payload.

Notes

• Make sure to add error boundaries for better error handling when components fail to load.
• You can use dynamic imports for nested routes as well.

Example 3: Lazy Loading Images in a Gallery

Use Case

In a gallery application, loading all images at once can lead to performance issues. Instead, you can lazy load images as they come into the viewport.

import React, { useState, useEffect } from 'react';

function LazyImage({ src, alt }) {
  const [isVisible, setIsVisible] = useState(false);

  useEffect(() => {
    const imgObserver = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          setIsVisible(true);
          imgObserver.unobserve(entry.target);
        }
      });
    });

    const imgElement = document.querySelector(`img[data-src='${src}']`);
    imgObserver.observe(imgElement);

    return () => imgObserver.disconnect();
  }, [src]);

  return <img data-src={src} src={isVisible ? src : ''} alt={alt} />;
}

function Gallery() {
  return (
    <div>
      <LazyImage src='image1.jpg' alt='Image 1' />
      <LazyImage src='image2.jpg' alt='Image 2' />
      <LazyImage src='image3.jpg' alt='Image 3' />
    </div>
  );
}

In this example, the LazyImage component uses the Intersection Observer API to determine when an image comes into view. It only sets the src attribute when the image is visible, effectively lazy loading the images in the gallery.

Notes

• The Intersection Observer API is supported in most modern browsers.
• You can customize the threshold and root margins for when images should start loading.

By implementing these examples of lazy loading in React, you can optimize your application’s performance and enhance user experience. Remember to always test your application to ensure that lazy loading is working as intended!