Lazy Loading

Lazy Loading

Lazy Loading is a design pattern that defers the initialization or downloading of an object until the point at which it is actually needed. It can contribute to efficiency in the program’s operation if properly and appropriately used.

In web development and React specifically, lazy loading generally applies to two things:

1. Code (JavaScript): Delaying the download of non-critical components.
2. Assets (Images/Videos): Delaying the download of media until it scrolls into the viewport.

1. Lazy Loading Code

In React, you lazy load code using dynamic imports and React.lazy().

When you use a standard import statement at the top of a file, bundlers (like Webpack, Rollup, or Vite) package all that code into one large file (the “main bundle”).

// Eager Loading (Downloaded immediately)
import HeavyGraph from './HeavyGraph'; 

By switching to a dynamic import(), you tell the bundler to split that specific file into a separate chunk. The browser won’t download this chunk until the import() statement is actually executed.

// Lazy Loading (Downloaded only when needed)
import { lazy } from 'react';
const HeavyGraph = lazy(() => import('./HeavyGraph'));

Note: You must wrap lazy-loaded components in a <Suspense> boundary to handle the loading state.

2. Lazy Loading Images

Images often account for the majority of a web page’s total download size. If a user visits a page with a gallery of 100 images, but only scrolls far enough to see the first 5, downloading all 100 images immediately is a massive waste of bandwidth and slows down the page load.

Modern browsers support native image lazy loading via the loading="lazy" attribute.

function ImageGallery({ images }) {
  return (
    <div className="gallery">
      {images.map(img => (
        <img 
          key={img.id} 
          src={img.url} 
          alt={img.description} 
          // Tells the browser to defer loading until it's near the viewport
          loading="lazy" 
          // Always provide width and height to prevent layout shifts
          width="400" 
          height="300" 
        />
      ))}
    </div>
  );
}

When NOT to Lazy Load

1. Don’t lazy load critical “above-the-fold” content.
If a component or image is immediately visible to the user as soon as the page loads (like a hero image or the main navigation bar), lazy loading it will actually hurt performance (specifically Largest Contentful Paint). The browser has to wait to discover it needs the file, creating a delay.

2. Don’t excessively code-split tiny components.
Every time you split a component, the browser has to make an additional HTTP request to fetch that chunk. If you split a 2kb button component into its own chunk, the network overhead of making the HTTP request is actually slower than just including it in the main bundle. Stick to splitting at the route level or for massive third-party libraries.

Interview Questions

Q: Why should you lazy load routes in a React application?
A: Users shouldn’t be forced to download the heavy JavaScript code for the “Admin Dashboard” if they are only visiting the “Home Page”. Lazy loading routes ensures users only download the precise code for the specific page they are currently viewing.