Member-only story

How Suspense Works in React 18

Know the new Concurrent Suspense and Transition API

Jose Granja
Better Programming
6 min readApr 5, 2022

--

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…

--

--

Jose Granja
Jose Granja

Written by Jose Granja

Top Writer @Medium | 1M+ Views | Lead FE @Lingoda | I write weekly about web-development topics 📰 Support me at https://dioxmio.medium.com/membership 🙇

No responses yet

What are your thoughts?