An Introduction to Lazy Loading (In React.js)

Lazy loading is the process of loading something asynchronously, or at least not right away on page load. This can be useful for sites with heavy image loading, or a page that wants to reduce initial page load times. Lazy loading in React can help with this problem.

So What Is Lazy Loading?

Lazy loading is fundamentally a function that you can import from the react library that lets you await the loading of a certain component/image/anything else. Think of it like using the "Defer" tag on a script in your index.html file. As I stated above, the benefits are faster load times and reduced network/processing burden on the client. To go deeper on the subject, Lazy loading allows important files to load first, and then once all of that is done, it renders the less needed things/ the things that can wait.

How Can I Use Lazy Loading In My Code?

It depends on the purpose of your code, but let's assume that you wanted to lazily load an image component so that users have a better experience upon initial page load. Let's start with the setup.

Firstly, we are going to have an image component that returns an image of our liking, we will call this LazyImage.

import React from 'react'

const LazyImage = () => {
    return(
        <img
            src="LazyCat.png"
            alt="Im Shleeeeepin"
          />
    )
}

export defualt LazyImage;
//LazyImage.js

Okay, so now we have our image component that Is ready to be loaded on demand. So what else do we need? For that let's take a look at the file that we will be Lazy loading this image inside of, for me this will be "App.js". Don't forget that Lazy loading is a built-in react feature, so we have to import it. We will also be importing a component called "Suspense" which I will explain in a second. But for right now let's jump into it.

//import React, lazy function, and Suspense component
import React, {lazy, Suspense} from 'react'

//Main App component
const App = () =>{
    //Use lazy function to lazy load image
    //lazy function takes callback on what to load lazily
    const LazyImage = lazy(()=> import('./LazyImage'))
    return(
    <h1>Hello!</h1>
    )
}

Awesome! We have our LazyImage component inside of our "LazyImage" variable, now what are we going to do with it? This is where the "Suspense" component comes in. The suspense component pretty much gives us the ability to display a sort of "Loading component" while our image is loading. It's conditional rendering based on whether the component has loaded yet. Let's implement this Suspense component into our code to make it work now.

import React, {lazy, Suspense} from 'react'

const App = () =>{
    const LazyImage = lazy(()=> import('./LazyImage'))
    return(
        <div>
            <h1>Hello!</h1>
            //Suspense component
            //fallback prop describes what will be shown while loading is occurring
            <Suspense fallback={<span>Loading sleepy cat!</span>}>
                //render Image
                <LazyImage />
            </Suspense>
        </div>
        )
}

export default App;

Awesome! Now we have a working React app that Lazy loads a sleeping cat image! There are a ton of ways that you can use Lazy loading to improve the quality of your website. Now let's move on to the last section.

When Should I Use Lazy Loading?

While Lazy loading is an awesome feature, make sure to only use It when it's necessary, just like for everything else, too much of a good thing can be bad. If you load too many components lazily, it can be hard to know the order of loading components, if components are loaded, and It can just increase codebase complexity in general.

Lazy loading is typically done on

Large Files that will massively affect load time
Components that are loaded after scrolling down
Complex/Interactive components
Complex widgets

There are uses outside of this list, but these are some of the main reasons that someone would use Lazy loading on their webpage.

An afternote

Now that you understand the basics of Lazy loading, try to implement it in your code and see how it works out. If you ever get stuck make sure to look at the react docs for lazy loading, https://legacy.reactjs.org/docs/code-splitting.html. Enjoy your performance boosts and async cat images!

Demo

https://replit.com/@Danner/hashnodeDemo

It might flash by quickly but the loading text is there! Open dev tools and set throttling to slow 3g if you want to fully see it. This Is just a small demo, but you get the point. Lazy loading can be very useful, especially on bigger web pages.

Danner's Coding Blog