Understanding React Suspense

React Suspense is a new feature in React that allows components to suspend rendering while they fetch data asynchronously. This can help improve user experience by showing placeholders or loading screens while waiting for data to load.

To demonstrate how React Suspense works, let's consider an example where we have a component that fetches data from an API and displays it on the screen. Normally, without Suspense, the component would render immediately and then update once the data has been fetched. With Suspense, we can show a loading indicator while the data is being fetched.

import React, { Suspense } from 'react';

const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("Data fetched successfully!");
    }, 2000);
  });
};

const AsyncComponent = () => {
  const data = fetchData();

  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        {data}
      </Suspense>
    </div>
  );
};

export default AsyncComponent;

In this example, we have a component called AsyncComponent that fetches data using the fetchData function. We wrap the data fetching logic inside the Suspense component and provide a loading indicator as the fallback prop.

When the component is rendered, it will immediately display the loading indicator while waiting for the data to be fetched. Once the data is retrieved, it will replace the loading indicator with the fetched data.

Overall, React Suspense is a powerful tool for managing asynchronous rendering in React applications. It allows developers to create more responsive user interfaces by handling data fetching in a more efficient and elegant way.