Learn how to use React Suspense for data fetching (part 1)

Introduction

When a website is opened, it typically renders all the components on the page at once. For smaller websites, this works just fine, but as the site grows with more components to load—many of them potentially on the same page—the website can slow down significantly. This causes longer load times as all components are downloaded in the user’s browser.

To address this, React offers a solution called the lazy method.

What is Lazy Loading?

With lazy loading, a component is only downloaded when it's needed, rather than being included upfront. However, if the user has a poor internet connection, the component may take longer to load. In that case, the user will be staring at a blank screen until the component finishes loading—definitely not a great experience.

To prevent this, we need to show something to inform the user that a process is happening in the background.

That’s where the Suspense API comes in handy. Let’s dive in!

What is Suspense?

The Suspense API works alongside lazy-loaded components, helping you improve the user experience by displaying something like a loading indicator while the component is being fetched.

Think of it as a way to show a "loading..." message, a skeleton screen, or a spinner while the actual component is being processed and downloaded.

Example

Now, let's walk through how to implement the Suspense API in a React application.

Basic Example

To use the Suspense API, simply wrap your lazy-loaded component inside the <Suspense> component provided by React.

Here’s a basic example:

import React, { lazy, Suspense } from 'react';
import Spinner from './layout/spinner';

// Lazy-load the FiciGame component
const FiciGame = lazy(() => import('./page/FiciGame'));

const App = () => {
    return (
        // Show a spinner while FiciGame is loading
        <div className='mx-auto w-4/12 p-8 flex justify-center self-center shadow-xl rounded-md bg-gray-900'>
            <Suspense fallback={<Spinner />}>
                <FiciGame />
            </Suspense>
        </div>
    );
};

export default App;

In this example:

React.lazy() is used to dynamically import the FiciGame component. This means the component won’t be loaded until it’s needed.
Suspense is used to wrap FiciGame, and the fallback prop specifies a loading indicator (<Spinner />) to show while the component is being fetched.

📌GitHub Source Code

Result

After adding Suspense and the lazy loading method to our application, the result is as follows:

Before Suspense: The user would see a blank screen while waiting for the component to load.
After Suspense: A loading spinner (or any other fallback UI) will be displayed, letting the user know that something is happening in the background.

Conclusion

In this article, we explored how to use React Suspense with the lazy loading method to improve user experience by showing a loading message instead of a blank screen while components are being fetched.

In the next part of this series, we’ll dive into more advanced examples, such as how Suspense can help components “wait” for data fetching requests to complete before rendering.