React Suspense for Fetching Data

Introduction to React Suspense

When we are on a website, it happens that the content on that page is being loaded. The data might be fetched from some other resource. During this interval, some content is displayed like " Please Wait" or Loading..". This can be made possible due to React Suspense.

React Suspense is a React technique or component that is used to enable data-fetching libraries to inform React when the data for the component is being fetched. It is used to manage asynchronous operations in the application. Until the required data is fetched, Suspense is used to suspend the component from rendering. It renders a fallback while the component is waiting for the data to be fetched. It makes the user aware that the data is being loaded on the screen.

React Suspense is not a data-fetching library. It is used to render a fallback until the data is loaded. It is used to wrap other components inside it.

How to use React Suspense

The first thing that we should see is, the conventional way pending network requests are handled.

Code-

Explanation-

In the given code, the loading variable is used to see the status of the request made. If its value is true, it will return the value of Spinner. This can be optimized by using React Suspense.

Code-

Explanation-

Earlier, React was not aware of the network request, but using Suspense, React has an idea about network calls. We have also used the fallback property that renders a fallback that is displayed while the network call is done. Whatever is the value of fallback, React renders that to us.

Data Fetching Without Suspense

Data can be fetched without Suspense. We can use a variable that contains a boolean value of the data loading state. If the value is true and the data is still loading, we will display some fallback which will be displayed till the entire data is loaded.

Code-

Explanation-

If the value of loading is true, some content is displayed on the screen.

Data Fetching With Suspense

When we do not use React Suspense, we have to explicitly tell React about network requests. It is not aware of the same. But by Suspense, React has an idea about network calls.

Code-

Example-

In the example, you can see the fallback attribute. It is an attribute of React Suspense. So, whatever you pass to the fallback attribute it will get assigned to a fallback UI which is rendered on the screen. The fallback UI is rendered till the data component is loaded.

Data Fetching Approaches with Suspense

We need data fetching approaches if the component needs some data from an API. To retrieve it, we need to make requests. There are 3 approaches` to doing the same-

• Fetch-on-render
• Fetch-then-render
• Render-as-you-fetch

Let us discuss these approaches in depth.

a) Fetch-on-render

This is one of the common approaches is to use the Fetch-on-render approach. The data is fetched using the use effect component. The name is so because it will only fetch the component after it has been rendered on the screen. It can lead to a problem known as a "waterfall".

First, let us understand the syntax.

Functional component-

We use the useEffect() hook in a functional component to fetch information.

Class component-

We use the componentDidMount() in a class component to fetch information.

But, as we discussed above, it can cause a waterfall issue. Let us see how it can occur.

Code-

Explanation-

In the above code, we have created two components namely UserPost and UserTimeline. The sequence of execution will be-

• First fetch the user details.
• Wait for fetching.
• Finish fetching user details.
• Fetch the profile details.
• Wait for fetching.
• Finish fetching profile details.

So assume that fetching the user details takes 2 seconds, the profile details will be fetched after 2 seconds. It is an issue and this is known as a waterfall as it is in steps instead of being parallel.

Fetch-then-render

This is another approach to fetching data. Here, data is fetched first before rendering. An example of Fetch-then-render is Relay without suspense.

Code-

Explanation-

Here, the functions fetchUserDetials() and fetchUserProfile() start executing in a parallel way. This is because of Promise. all.

Render-as-you-fetch

The Render-as-you-fetch approach uses React Suspense method. Here, we will start the rendering as soon as the network request is made.

Code-

Explanation-

• React will first try to render UserProfile(). It is used to return UserDetails() and ProfileTimeline() as children.
• It will read UserDetail(), but since the given data is not fetched yet, this component is suspended and another component rendering is started.
• The same will happen for ProfileTimeline(). It will read ProfileTimeline(), but since the given data is not fetched yet, this component is suspended and another component rendering is started.
• As there is nothing else to render, React will display the fallback mentioned in Suspense.

How to Manage Rendering Order with React Suspense

If you want one component to render when the other component has finished rendering, this can be done by managing the rendering order.

Code-

Explanation-

There is another approach to managing the rendering order. This is by wrapping the Suspense components into the SuspenseList component and passing the revealOrder parameter.

Code-

Explanation-

Here the "forwards" order is used to render components in the order in which they appear in the code, irrespective of which one gets the data first.

Examples for Understanding

We will see an example where we will be fetching data from an API that we have created. We then write our React code where we will be fetching data from this API.

Code-

Output-

While the data is being fetched, you see the following output-

Here, whatever is written inside the Suspense component gets rendered. After the data is fetched, we can see the output from the API-