How to lift your React App performance using Lazy Loading?
Tags: javascript, react, beginners
Published: 2020-02-21 20:15:35

Originally posted on [my blog](https://www.ibrahima-ndaw.com/blog/lazy-loading-using-react/)

React, as you already know is a JavaScript a library for building user interfaces. And when we develop React apps, we build a lot of components that will be bundled into one file at the end. Depending on the size of our files and third-party libraries it can be really big, even if the building part will minify it and reduce the size.
However, that bundle size can be optimized again with a technic called Lazy Loading.

In this tutorial, we will learn how to lift a React App performance using Lazy Loading. 

## Prerequisites

This tutorial assumes that you have at least a basic to mid-level knowledge of [React](https://reactjs.org) and [React Router](https://reacttraining.com/react-router/web/guides/quick-start), I will only focus on the Lazy Loading part.

If you need to get started with the React Router, this [tutorial](https://www.ibrahima-ndaw.com/blog/the-complete-guide-to-react-router/) might help you, otherwise, let's do the prerequisites.

To be able to follow along, you'll have to clone the [repo](https://github.com/ibrahima92/prep-react-lazy-loading) of the project by running in your terminal:

```shell
git clone https://github.com/ibrahima92/prep-react-lazy-loading
```
And run `npm install` in your terminal to install the dependencies.

Then, If you've done with the prerequisites, let's start loading our components lazily.

## What is Lazy Loading?

Lazy loading or code splitting is the ability to defer the loading of a chunk of code. That means, instead of bundling and load all the code when the page loads, just the needed code will be loaded, and some parts will be loaded whenever it's needed.

## When do we need Lazy Loading?

Code splitting is useful for medium size to larger React apps. Even in some medium-size apps, we don't need lazy loading. 

If you have some parts of your app where most of your users won't visit, it makes sense to load it lazily instead of increasing your bundle size and hence, decreasing the performance of your app.

In this tiny project, lazy loading is overkill, to be honest, but it's always much simpler to learn how to do these kinds of things with a mini-project.

Now, let's start loading our component lazily.

## How to lazy load a component?

Before React 16.6, Lazy loading was done either with Higher-Order Component (HOC) or a library. Now, loading a component lazily is much easier with React lazy and React Suspense. However, React Lazy doesn't support named exports and server-side rendering.

It's also good to know that Code Splitting is an advanced concept, and some bundlers don't support it. `create-react-app` has a really good and modern configuration, use it as possible as you can. 

So, let's update the `App.js` file a bit to see them in action.

- In `App.js`

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

import NavBar from './components/NavBar';
import Posts from './components/Posts/Posts';
const Users = lazy(() => import('./components/Users/Users')) 

function App() {

  return (
    <BrowserRouter>
      <main>
      <NavBar />
      <Switch>
        <Route exact path="/" component={Posts}  />
        <Route path="/users" render={() =>
          <Suspense fallback={<h1>Loading....</h1>}>
            <Users />
          </Suspense>
        }/>
      </Switch>
      </main>
    </BrowserRouter>
    );
}

export default App;
```

As you can see here, we start by importing `lazy` and `Suspense` from the React library. Then, instead of importing the `Users` component, we use `lazy` to be able to defer it and import the needed component dynamically when needed.

With that change and the help of `Suspense`, we can now use the `render` props provided by React Router to display the component once imported and if it takes time to load, it will use the `fallback` to show a loading message. 

By the way, for the `fallback` property you're not limited to a simple message you can use a spinner component, loading indicator, etc.

Now, to see what's changed you need to open your browser devtools and check the `Network` tab, then, you'll see that when you click on the `Users` page, a new chunk of data will be loaded.

![image-cache](https://drive.google.com/uc?id=1vFMgbEyu8y7T8cKbkfU8amnr6Xl0D_m4)

With that change, we have now successfully loaded a component lazily using React Lazy and React Suspense.

## Conclusion

Lazy Loading is a good way to increase performance in a React App. It's really useful in some cases and definitely, something to know and use, however, using it when not needed can cause some performance issues. 

| [TWITTER](https://twitter.com/ibrahima92_) | [BLOG](https://www.ibrahima-ndaw.com/) | [NEWSLETTER](https://ibrahima-ndaw.us5.list-manage.com/subscribe?u=8dedf5d07c7326802dd81a866&id=5d7bcd5b75) | [GITHUB](https://github.com/ibrahima92) | [LINKEDIN](https://www.linkedin.com/in/ibrahima-ndaw/) | [CODEPEN](https://codepen.io/ibrahima92) | [DEV](https://dev.to/ibrahima92) |
| -------------- | ------------------------------------------ | ----------------------------------------- | ----------------------------------------------------------------------------------------------------------- | ----------------------------- | ------------------------------------------------------ | ---------------------------------------- | -------------------------------- |

Photo by [Kate Stone Matheson](https://unsplash.com/@kstonematheson?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/photos/uy5t-CJuIK4)