Lazy loading in React allows you to split your code into smaller chunks, loading only the code that is needed for a particular part of your application when it is actually required. This can improve the initial loading time of your application.

React provides a feature called dynamic import*, along with **React’s Suspense component,** to achieve lazy loading.*

Example:

Here’s an example of how you can implement lazy loading for a route in a React application using React.lazy() and Suspense

lazy() is used to dynamically import components only when they’re needed.
Suspense is a component provided by React that lets you “wait” for the dynamic import to load, showing a fallback UI in the meantime (in this case, a simple “Loading…” message).

// Products.js
import React from 'react';

const Products = () => {
  return <div>This is a lazy-loaded component!</div>;
};

export default Products;

Use React.lazy() to import the component dynamically in your route file

const Prodcuts = React.lazy(() => import("./components/products/Products"));

const router = createBrowserRouter(
  createRoutesFromElements(
    <Route path="/" element={<App />}>
      <Route path="/" element={<Home />} 
      <Route
        path="prodcuts"
        element={
          <React.Suspense fallback={<>Loading</>}>
            <Prodcuts />
          </React.Suspense>
        }
      />
      <Route path="*" element={<PageNotFound />} />In the code above, the product component is loaded lazily using React. lazy(). The Suspense component is used to specify a fallback UI while the lazy-loaded component is being loaded.
    </Route>
  )
);

In the code above, the product component is loaded lazily using React. lazy(). The Suspense component is used to specify a fallback UI while the lazy-loaded component is being loaded.

How to Lazy Load Images in React

Lazy loading an image/iframe today is as easy as adding the attribute loading=" lazy" inside the img/iframe element, like this

<img src="image.jpg" alt="Image Alt" loading="lazy" />
<iframe src="iframe" loading="lazy"></iframe>

Sadly, lazy loading images this way is not widely supported in all browsers.In those cases, you'll need to use/combine it with other libraries or tools.

Step 1 – Install React Lazy Load Image Component

// Yarn
$ yarn add react-lazy-load-image-component
or
// NPM
$ npm i --save react-lazy-load-image-component

Step 2 – Import the component

import Image from "../images/Step 3 – Declare the imagebird.jpg";
import { LazyLoadImage } from "react-lazy-load-image-component";

Step 3 – Declare the image

export default function App() {
  return (
    <div>
      <LazyLoadImage src={Image}
        width={600} height={400}
        alt="Image Alt"
      />
     </div>
  );
}

Step 4 – Add a placeholder image

Alternatively, we can preview a low-resolution image first while waiting for the main image to load. This helps fill the image area so users know a picture is loading.

import Image from "../images/bird.jpg";
import PlaceholderImage from "../images/placeholder.jpg";

<LazyLoadImage src={Image}
    width={600} height={400}
    PlaceholderSrc={PlaceholderImage}
    alt="Image Alt"
/>

Step 5 – Add image blur

LazyLoadImage also provides a plugin to make an image blur initially before it loads and removes the blur after the image loads completely.

import Image from "../images/bird.jpg";
import PlaceholderImage from "../images/placeholder.jpg";
import { LazyLoadImage } from 'react-lazy-load-image-component';
import 'react-lazy-load-image-component/src/effects/blur.css';

<LazyLoadImage src={Image}
    width={600} height={400}
    PlaceholderSrc={PlaceholderImage}
    effect="blur"
/>

React Lazy Loading