What is React Suspense?

Suspense is a powerful feature of React that allows for more effective and user-friendly management of asynchronous processes. Handling asynchronous data fetching, code splitting, and rendering may become quite difficult as web application complexity grows. React Suspense addresses these issues by offering a declarative approach to manage asynchronous processes.

Let’s say we have a child component performing an asynchronous action where it is fetching data from an API.

1 of 3

Real-world examples

Let’s consider some real-world scenarios where React Suspense can be beneficial.

News website: Imagine a news website where articles are loaded asynchronously. React Suspense can help display a loading spinner while fetching the article content, providing a better user experience.
E-commerce product listings: In an online store, we often have a long list of products to display. With React Suspense, we can ensure that the product images and details load smoothly, even if they come from different sources or APIs. Users will see placeholders or loading spinners while data is being fetched, creating a seamless shopping experience.
Dashboard widgets: Consider a customizable dashboard with various widgets, like weather updates, stock prices, or social media feeds. React Suspense can help load each widget’s content independently, preventing one slow-loading widget from blocking the entire dashboard. Users can start interacting with available widgets while others load in the background.

Syntax

Let’s look at the syntax of React Suspense:

import React from 'react';

// This functional component, PostList, receives an array 
// of 'posts' as a prop and renders them.
function PostList({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        // For each post, create a list item with a unique
        // key based on the 'post.id'.
        <li key={post.id}>
          {/* Display the 'post.title' within the list item. */}
          {post.title}
        </li>
      ))}
    </ul>
  );
}

export default PostList;

Data fetching example using React Suspension

Code explanation

Let's discuss the above code in detail.

The `app.js` file

Line 1: Import the necessary 'react' library modules, useState, useEffect, and Suspense.
Lines 4–11: Define a custom asynchronous hook called fetchPosts. This hook fetches data from a given API endpoint, parses the response into JSON, and returns the data.
Line 14: Declare a lazy-loaded PostList component using the React.lazy() command. This component will be loaded asynchronously when required.
Lines 16–34: Define the main functional React component, App. In order to maintain state and conduct asynchronous data fetching, it employs the useState and useEffect hooks. When the component is mounted, it uses the fetchPosts hook to retrieve posts from the API.
Lines 25–33: While the PostList component is loaded, the component renders a loading message inside the return statement using Suspense. It renders the PostList component when it has been loaded, passing the fetched posts as a prop.
Line 36: Export the App component as the default export of the module so that it can be used anywhere in the application.

The `index.js` file

Lines 1–3: We import the React and ReactDOM modules. The PostList component is imported from the app.js file.
Line 6: Select the HTML element with the id “root” using the document.getElementById("root") command and assign it to the rootElement constant. This is where the React component will be rendered.
Lines 9–12: The ReactDOM.render() command is called to render the PostList component inside the rootElement. The component will be injected into the DOM and displayed on the webpage.

The `PostList.js` file

Line 1: Import the React module from the 'react' library.
Lines 5–18: Define a functional component, PostList which is responsible for rendering a list of posts. It receives a single prop, posts which is expected to be an array containing the post data.
Line 7: We create an unordered list (<ul>) element to contain the list of posts.
Lines 8–15: We use the .map() function to iterate over each post in the posts array. For each post we create a list item (<li>) element.
- Line 11: Each list item has been assigned a key prop. This key is required for React to render and update the component efficiently. We use the post.id as the key in this case, assuming that each post has a unique identifier.
- Line 13: Inside each list item, we display the post.title. This assumes that each post object has a title property containing the post’s title.
Line 20: Finally, we export the PostList component as the default export of this module.

What is React Suspense?

Working of React Suspense

Real-world examples

Syntax

Code example

Code explanation

The `app.js` file

The `index.js` file

The `PostList.js` file

What is React Suspense?

Working of React Suspense

Real-world examples

Syntax

Code example

Code explanation

The app.js file

The index.js file

The PostList.js file

The `app.js` file

The `index.js` file

The `PostList.js` file