Lazily Suspending in React

By Carmen Salas

I am currently learning how I can optimize the performance of my React applications. When wanting to render components in an application it can take time and slow down your application. One of the React functions I am learning about is React.lazy, which allows your components to lazy-load. Let’s talk about how we use lazy in conjunction with React’s newer feature, Suspense.

We’ll go into:

• What is lazy loading and why is it important?
• What is lazy loading in React?
• What is Suspense in React?
• How to use React.lazy and Suspense in a React application

What is lazy loading and why is it important?

Lazy loading stops a webpage from rendering all of its contents at once. Lazy loading allows the contents of a page to render only when a user reaches that part of the page. An application basically holds off on rendering contents if a user does not reach the section of the page with those contents.
The benefits of this, are that it optimizes time and space for content delivery on an application.

What is lazy loading in React?

React has a function react.lazy, which makes it easy to lazily load the contents of a page by code splitting.

react.lazy bundles components you are importing to automatically load when rendering the entire page

The way react.lazy works is it takes in a function that must call a dynamic import. This means a promise is returned which resolves to a default exported module that is in your application.

Here’s how you would use it in an application:

const Banner = React.lazy(() => import('../HomePage/Banner'));

This will make the Banner component in my application lazily load when I use it, as opposed to how I would normally import it:

import Banner from '../HomePage/Banner';

Now if we want to use the lazy function in our application we have to wrap the lazy component in a Suspense component

What is Suspense in React?

The <Suspense> component is a new addition to React 16.6. It will essentially wait to see if what you want to load is ready to load, and while waiting, Suspense will render a fallback.
Suspense takes in a prop called fallback which is your loading state,
While loading,Suspense will give you the fallback this could be a component, like a loading spinner or text.

How to use React.lazy and Suspense in a React application

Now that we know how lazy and Suspense will work together to lazily load contents on to your application let’s see how the code looks.

This is how we would wrap our lazy component in a Suspense component.

import React, { Suspense } from 'react';
import Spinner from 'react-bootstrap/Spinner';

<Suspense fallback={<Spinner animation="border" variant="info" />}>
    <Banner/>
</Suspense>

Here I wrapped my lazy component Banner in the Suspense component and set the fallback in Suspense to be a spinner component imported from React Bootstrap.

Pretty simple right?

This will then lazily load the Banner component in my application. While loading a react-bootstrap spinner will render on the page while the Suspense component is waiting to see is the Banner component is ready.

It will look something like this:

In conclusion,

These pretty new features from React are really great for optimizing the performance of your applications when it comes to loading and rendering components. This is a pretty simple way to show how to implement lazy loading in your react components but there are endless possibilities in which you can use lazy and Suspense to upgrade and benefit your applications. Try it out!

Cover by Jen Theodore on Unsplash