What’s the new React Suspense?

react logo with chemistry lab behind
Summary
  • React Suspense is an experimental feature announced by Dan Abramov that manages asynchronous operations by deferring rendering until data is loaded, considering CPU power and data fetching for better scalability and performance.
  • Implementation requires installing the simple-cache-provider dependency and using methods like createCache to store data and createResource to handle asynchronous operations.
  • The author suggests Suspense could potentially replace Redux due to its simpler initial learning curve and could inspire similar data architecture patterns in other component-based technologies like Vue.js and Angular.
  • As an experimental feature, Suspense is not recommended for production environments yet.

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.

One more thing…

Don’t forget this is an experimental feature, so don’t worry about using it in production environment yet.

And, of course have fun while using this tool. I hope you feel more productive and satisfied with the result. 🙂

References

Designed by Rawpixel.com

https://reactjs.org/

https://blog.logrocket.com/async-rendering-in-react-with-suspense-5d0eaac886c8

https://medium.com/@baphemot/understanding-react-suspense-1c73b4b0b1e6

https://blog.pusher.com/time-slice-suspense-api-react-17/

https://medium.com/@ryanflorence/the-suspense-is-killing-redux-e888f9692430

https://www.youtube.com/watch?v=z-6JC0_cOns

https://www.youtube.com/watch?v=nLF0n9SACd4

FAQ

What is React Suspense?

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

How does Suspense handle data?

It uses a new structure based on cache where you can store your data and access it, using the cached data as a resource.

How do you start using React Suspense?

You need to install the dependency with 'npm install simple-cache-provider' and then use methods like createCache to create a storage for your data and createResource to perform asynchronous operations. This way, the component will not be shown until the data is loaded.

Could Suspense replace Redux?

From the author's point of view, the simplicity of Suspense and its cache provider may promote Redux's death, since the first contact with it is easier than with Redux and it offers good scalability and performance as an alternative package.

Is React Suspense ready for production?

No. It is an experimental feature, so it should not be used in a production environment yet.

About the author.

Rurik Pinheiro
Rurik Pinheiro

I like to solve problems with code. So, give me a problem and I'll give back a pretty coding solution to you.