At the stage of last JSConf.is conference, Dan Abramov unveiled a new feature / API for React called React Suspense. In case you missed it, you can re-watch the talk on YouTube:

In short: the new feature allows you to defer rendering part of your application tree until some condition is met (for example data from an endpoint or a resource is loaded).

Why do we need this?

Delaying displaying content is possible already, all one has to do is check if the data is loaded, and if not, show a spinner — if it’s as simple as that why do we need this?

In reality things are a bit more complicated than that:

with this approach we need to either implement the loading screen in the component which requests / consumes the data, or expose its API to parent

things get more complicated the more content we need to load (what if you wanted to load a movie details page only when the reviews and all images are also already loaded?)

once we start making use of AsyncMode things will get even more complex — parts of your application might have new data, parts of it old, which would lead to “tearing” or “flickering” of content

In order to fix those, and probably more issues which will become more apparent once AsyncMode becomes mainstream React team proposed the new API.

Another big issue that this solution aims to address is the user experience difference between users with fast device/network and slow ones. If we do go with the spinner that was our initial idea, we might end up showing it for a fraction of a second for users that have fast connection, in which case not showing it at all would be better UX as it eliminates screen flickering.

Live demo

I’ve been able to create a simple demo of the feature (with help from Dan and Aweary over at Twitter) so before we jump into the code you might want to check it out.

Disclaimer