Lazily Suspending in React 

Tags: javascript, react, tutorial, productivity
Published: 2020-06-29 13:54:17

*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: 
```js
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: 
```js
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. 
```js
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: 

![image of loading spinner in application](https://dev-to-uploads.s3.amazonaws.com/i/3nlfkeo2ya1a09x8akwe.png)


***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