Asynchronous rendering with React

How the new React Suspense API might reshape the way we build components

Maxime Heckel
Nov 6, 2018 · 4 min read

A more accessible, readable, mobile-friendly and up to date version of this story is available on my personal blog!

Since I’ve started playing with React a couple of years ago, I’ve always been a big fan of functional components. Their simplicity and conciseness make them easy to read and test. The problem though was that, until now, there was no way to do asynchronous calls which is the crucial part of most applications in the real world, so classes were always the way to go.
However, starting from React 16.6.0 and the new Suspense API, this is not an issue anymore, functional components can now perform asynchronous calls and render data that comes from them. In this post, I’m going to show you an up to date example so you can easily test the Suspense API.

Note: Although it’s available through the last official version of React, using Suspense as I’ll show you in this post is not yet intended for production. This example solely exists as an experiment.

What is Suspense in a nutshell?

A new way to build components

Image for post
Image for post
Code Snippet 1: React component doing an asynchronous call before rendering the data implemented using a Class.

How Suspense changes that? Well, quite a lot actually if you compare the code above with the following one:

Image for post
Image for post
Code Snippet 2: React component doing an asynchronous call before rendering the data implemented using React Suspense.

As we can see with this example: no more class! Suspense is managing for us the loading state through the fallback prop, which is rendered until List is ready to be rendered, that is when the dependent asynchronous call resolves and returns the data. However, this is only a partial example. As stated in the first part, the rendering of List in this example is suspended while loading data from a cache, which is what the Fetcher function is all about.

Using react-cache

Image for post
Image for post
Code Snippet 3: Fetcher resource implementation using functions from react-cache

For this post I used react-cache. It’s a package made by the React core team that provides a basic cache that is going to store asynchronous data, like the data that we’re getting once our fetch call resolves, and allows us to access that data asynchronously. In the code snippet above we basically use the unstable_createResource function where we pass our asynchronous call, which will initiate a cache and store the resulting data into it. Accessing that data from the cache is done through the read function as we can see in the Code Snippet 2. However, this way of doing caching is currently not meant to be used in production (the React team emphasized this quite a bit in the README of this repository).

Full Example

Image for post
Image for post
Code Snippet 4: The full example of a functional React component using the Suspense API

I made this example available in a Github repository based on create-react-app so you can also give it a try and experiment with Suspense very quickly!

I really can’t wait for this pattern to be ready for production. Combining Suspense and the recently announced React hooks is getting us closer to building React apps fully based on functional components. If you want to learn more about Suspense here’s a really complete summary in a tweet from a member of the React team:

If you liked this article don’t forget to hit the “clap” button and if you have any other questions I’m always reachable on Twitter, or on my website. You can also subscribe to my Medium publication to not miss my next post.

Have a wonderful day.
Maxime

Maxime Heckel

Software engineer and space enthusiast.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store