Member-only story
How Suspense Works in React 18
Know the new Concurrent Suspense and Transition API

The React Suspense
feature was released as part of React 16
version. There, it had only one use case. It was meant to be used with its React.lazy
API for code splitting. It would serve as a fallback when the element was not on yet downloaded and presented. It had one major drawback though. It could not be used on the server-side rendering engine.
It had other caveats however those were only temporary. It was well known that Suspense
was a cornerstone of React’s concurrent engine mode. It was meant as much more than a code-splitting dedicated API.
With the Release of React 18, the Suspense
feature has been further developed and enhanced. It fits many use cases and now it is compatible with SSR
. It still can’t be used for data fetching though. This feature is still in experimental mode and might make it to a further release.
The React team provides a progressive update. Only by using the new ReactDOM.createRoot
API we will unlock concurrency and all the fancy new Suspense
features.
A Brief Recap
What is Suspense
? It is a lower-level engine API that can be used to pause a component’s execution. How is that done? In a nutshell, it all boils down to a component throwing a…