
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 <span class="highlight-small">Lazy loader</span> or <span class="highlight-small">Code-splitting</span>.

<div class="highlight">

## 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.

</div>

What is the syntax for lazy loading?

```javascript
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:-

```javascript
import { lazy } from "react";

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

The above example is doing the <span class="highlight-small">dynamic import()</span> of a component using lazy function.

Along with the lazy function we can use another component, i.e.; <span class="highlight-small">`React Suspense`</span>. This function will specify while the component is loading, look at the below picture to clear the confusion.

![How to do lazy loading in ReactJS](/assets/blog/helpers/lazyloading-gif.gif)

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.

```javascript
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.

<a rel="nofollow" href="https://github.com/ullas1000/react-lazy-loader">React Lazy loader</a>

Thank you. <span>&#128526; <span>


A lazy function lets you defer the loading of a components 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. 

More Stories related to 'reactjs'

Also read the similar topics