What is React Suspense, And Is It Better For React Performance?

You’ve probably heard of React Suspense, but do you know what it is? In this article, I will explain what React Suspense is and how it works. I will also cover common use cases for implementing React Suspense in your app.

What Is React Suspense?

React Suspense is a feature that allows you to defer the rendering of your app until data has been fetched and is ready to be displayed. The idea behind React Suspense is simple: instead of rendering the entire application at once, React will provide a placeholder for each component that’s waiting for data. Then, when all the components are ready to be rendered or you access the relevant route, it will display them all at once.

Is React Suspense A New React Component?

React Suspense is a new React component. It’s meant to be used alongside existing components, and it allows you to use those existing components in different ways.

You can think of React Suspense as “preloading” your data before showing it. The idea is that you’ll load your data, then wait until the user clicks or does something before showing it to them. Maybe this means waiting for user input like an email address before confirming whether they have access to view the page content or perhaps waiting for an async request (like fetching data from an API) before showing it on screen.

What I am going over in this article is how you can use suspense as part of another element rather than simply relying on React Lazy loading alone!

How to Implement Suspense With React.lazy Here’s how to implement Suspense with React.lazy:

Import React Suspense & Lazy from React (The two different methods are shown in the below example).

Wrap your imported components with a React.lazy wrapper as seen below.

In your return block wrap everything in the suspense component and then add a loading spinner as a fallback.

It’s as simple as that and now you have improved your react apps performance!

import React, { Suspense } from "react";
import { Route, Routes } from "react-router-dom";

const Card = React.lazy(() => import("./components/Card"));
const Create = React.lazy(() => import("./components/Create"));
const Destinations = React.lazy(() => import("./components/Destinations"));
const Details = React.lazy(() => import("./components/Details"));
const NotFound = React.lazy(() => import("./components/NotFound"));
const ReactQueryDestinations = React.lazy(
  () => import("./components/ReactQueryDestinations")
);

function App() {
  return (
    <Suspense fallback={<p>Loading component...</p>}>
        <Routes>
          <Route path="/create" element={<Create />} />
          <Route path="/hotels/:id" element={<Details />} />
          <Route path="*" element={<NotFound />} />
          <Route path="/" element={<Card />} />
          <Route path="/destinations" element={<Destinations />} />
        </Routes>
    </Suspense>
  );
}

export default App;

Conclusion

In conclusion, the React Suspense component is a great new way to handle loading data in your apps. It’s easy to use and works well with other libraries also. If you’re looking for an easy way to improve your app’s performance, then try out this solution.

You can watch the video of this explanation.

See more blogs on my site also or check out videos on the Imran Codes Youtube Channel!