Suspense in react

So, What is Suspense in React?

A very simple way to put it is that it is used as a event listener for data fetching.

Umm... what? what did you just say?

Let me explain,

When we would use a third party API to make calls, it takes a bit time to get the response, to tell the user that it's loading, what one would do is make a state and set it to a boolean and change it when data is fetched and use that state to display a spinner/loader. This seems pretty easy to do, but what happens when you're in a very big application? Making a state, updating it's value, showing spinner would be tedious. That's where Suspense comes into play.

Suspense API knows when your data arrives, you just have to setup some boilerplate code once and you're set!

Suspense knows when your data is still loading and it shows a fallback component till the time being, like a spinner or preloader for example.

BEWARE! This is available in an experimental version of React, do not implement this is your production level apps.

For those who'd like to play around with this, here is a link to a codesandbox instance, fork it and experiment!