React:Suspense
lastmod 2024-01-06created 2024-01-061 edits
About
Suspense was first demoed in 2018 and made a big splash in the React community, then was added to React v16.6 as an experimental feature, so those in the know have probably all tried it once. I know many React developers had been eagerly waiting for Suspense to become an official React feature, and that finally happened in React v18.0! 🥳
With Suspense, a new React technology, you can pause a component's rendering until some task finishes and render other components first. There is no particular constraint on what that task must be, but what comes to mind first is fetching data asynchronously over the network by calling a REST API or GraphQL.
Loading data asynchronously has always been necessary, from the old days of writing components as classes to today's use of hooks, but it is tricky to implement directly with React. So it is common to rely on data loaders provided by libraries or frameworks that specialize in data loading.
Suspense is a new mechanism for telling React that the data a component needs to read is not ready yet. Through Suspense, you can also glimpse the React team's long-term plan to standardize how components read asynchronous data. Suspense may look like a small idea at first glance, but personally I think it is a feature with enough impact to change the React development paradigm going forward.