React Suspense and React.lazy by Example

React 16.6 was released this week and code splitting with Suspense is probably the most interesting feature included in my opinion.

When apps start to grow you can easily end up including too many components making it heavier and slow to load. One of the solutions to this problem is Code-Splitting and Webpack is probably the most popular tool in the React ecosystem to perform the task of bundling and generating files that can be dynamically loaded at runtime. So if you ever wondered why we use so many import statements in our React apps, that’s the reason.

Code-Splitting combined with lazy loading can help improve not only the performance of your app but the user experience by loading only the Components that really needed instead of loading everything during the initial load.

How Can I Implement React.lazy and Suspense

It’s actually not that hard. Let’s see a simple React “app” as an example. I modified the default code generated by the create-react-app tool and included a new component called Cat.js.

The Cat.js component consist of just an image tag that shows a kitten from

In the App.js file I import the Cat.js component and I added a button to show and I hide the kitten image as shown here:

To show and hide the image I conditionally render the Cat.js Component based on a state variable called “showImage”, so if the “showImage” variable is set to true, then the Cat.js Component is rendered if not is hidden. And by default it will be hidden. This is what is shown in the browser when “showImage” is set to true:

React Suspense Lazy Load Example
React Suspense Lazy Load Example

To implement React.lazy and Suspense I need change the import of the Cat.js Component, and it will look like this:

Also I need to wrap up the Cat Component in a Suspense tag like this:

Notice there’s a fallback prop, that’s used to give feedback to the user when the Component is loading and it could be just a message like “Loading…” or it could it a another Component showing a loading spinner for example.

And here’s how the App.js Component will look like:

Now if you open Chrome dev tools (or any dev tool depending on your browser) you should see a GET request when you click on the button to show the image:

Chrome Dev Tools Network Request Chunk
Chrome Dev Tools Network Request Chunk

That “0.chunk.js” file at the bottom includes the Cat.js Component.

And that’s all you have to do. Obviously this is a simple example, but this same implementation can be used in other interesting places, for example in routing.

You can find this code here: .

And the video version of this example is here:

Why use React.lazy and Suspense instead of React Loadable?

I think this is the question most React Loadable users are asking right now and the answer is pretty simple, because it’s a native solution. This happens every time a technology integrates something done by a third-party tool, in this case one of the most important reasons to switch is that you will have less dependencies in your project and that also means less things to load in your app, so there’s a performance benefit if you switch. Less is more, they say.

But something important to consider before switching is that React.lazy and Suspense are not yet available for server-side rendering, so if you do code-splitting in a server rendered app, you should better keep using React Loadable.


Important: Suspense at the moment is meant to be used for code splitting not for data fetching  or caching yet.