Suspense

How to Fetch Data with React Suspense

A while ago, React introduces a new set of features called “Concurrent Mode”. And its basically allows you to interrupt the rendering process of your React components. And, with this feature comes the React Suspense.

Traditionally, data fetching in React looks like this:

import React from "react"

class Example extends React.Component {
	componentDidMount() {
		const data = fetchSomething() // Fetch data here
	}

	// ...
}

It’s very obvious that the request happened whenever this component is being rendered or mounted. Suspense allows us to “wait” until we get the data that being fetched asynchronously before we render our component.

Read more