In this article you will get to know what is React Suspense, how to use this feature and what to expect from the future of the SPA’s (Single-page application) from my point of view.

In the last JsConf at Iceland, Dan Abramov showed us a new feature called Suspense, where you can manage asynchronous requests and more – if you didn’t watch the presentation, you can do it right now:

The Concept

Suspense is the experimental feature announced by Dan Abramov that helps us to manage asynchronous operations. It is able to defer rendering data respecting the CPU power and data fetch, allowing more scalability and performance.

Considering it, there is a new structure based on cache where you can store your data, and access it as well, using the cached data as resource.

How to use it

To use this feature you only need to install the dependence:

npm install simple-cache-provider

And call some important methods:

In this case, we need to create a storage (createCache) – to store your data, of course – and then to create a resource (createResource), like a service to do asynchronous operations. This way, the component will never be shown until your data is loaded. This is enough to define a structure that is able to manage data cached and fetches with a suspense possibility.

Live Code

However I might have a more practical demo to present you:

What to do right now?

I hope a big change with data organization in front-end. Today we have the Redux, a powerful solution to manage data, but with the simplicity of suspense and its cache provider it may promote Redux’s death.

I would consider this way because the first contact with it is easier than with Redux. Also because it is an alternative package that gives you good scalability and performance.

Maybe we are living a new era to architect data in front-end and this is the opportunity to recreate this pattern to another technologies component-based, like vue.js, angular and more.