How to do lazy loading in ReactJS

Ullas Kishan

Ullas Kishan

July 10, 2023

3 min read

Whenever creating any kind of application, you must think about its performance. Nowadays, performance is the biggest factor in applications. Consider if you have a competitive application, then if you lose the performance the users will go for the alternative application which leads you to the biggest loss.

When you start to create an application at the time you have to start to think about the performance as well. If you think later, then it will be a mess for you, because the performance factor will come to place when you are adding more facility to the application. When we add the features to the application gradually, the bundle size will also increase, and the browser needs to download the whole required files from the bundles.

We know the deployment bundle has all the files, so if you try to download all the files, that might face performance problems. So, here we can have one concept, that's called Lazy loader or Code-splitting.

What is ReactJS Lazy loading?

A lazy function lets you defer the loading of a component's code until it is rendered for the first time. Before, it will remain in the bundle. So that we can reduce the load of the application.

What is the syntax for lazy loading?

import { lazy } from "react";

const componentName = lazy(load);

The function lazy is derived from react package and the lazy function has the only parameter that is our component. Once passed as a parameter to the function, then it will return as a new component that will be stored in the variable and we can use it accordingly.

E.g:-

import { lazy } from "react";

const About = lazy(() => import("./Aboutus"));

The above example is doing the dynamic import() of a component using lazy function.

Along with the lazy function we can use another component, i.e.; React Suspense. This function will specify while the component is loading, look at the below picture to clear confusion.

How to do lazy loading in ReactJS

The above picture shows loading text while moving to the next item, but it is shown only once, because the component is downloaded from the bundle and does not require further loading of the same component. The loading text is coming from Suspense component.

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

import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";

const About = lazy(() => import("./Aboutus"));

const HomeComp = lazy(() => import("./Home"));

const Contact = lazy(() => import("./contactus"));

function App() {
  return (
    <>
      <Router>
        <Suspense fallback={<div className="loading">Loading...</div>}>
          <Routes>
            <Route path="/" element={<Layout />}>
              <Route path="/" element={<HomeComp />} />

              <Route path="/about" element={<About />} />

              <Route path="/Contact" element={<Contact />} />
            </Route>
          </Routes>
        </Suspense>
      </Router>
    </>
  );
}

The above code is the abstract of the react lazy loader, please find the GitHub link for your references.

React Lazy loader

Thank you. 

Related tags

More Stories

A Guide to Resolving Git Conflicts in Your Local Setup

Despite being acquainted with git, many developers struggle to resolve these conflicts due to a lack of understanding of how to pull the conflict details into their local machines.