Yes, Suspense can be used for data fetching, but not directly with plain JavaScript promises.
React Suspense expects special "suspending resources" that tell React when they are pending and when they are ready.

As of React 18+, Suspense is designed to work with asynchronous data fetching — especially when combined with tools like:

• React Query
• Relay
• SWR
• custom Suspense-enabled fetch wrappers
• and future React features like Server Components.

Here’s how data fetching with Suspense typically works:

• If the data is not ready, your resource "throws a Promise" during render.
• React catches it and shows the fallback UI.
• When the Promise resolves, React retries the render.

Example using a simple Suspense-enabled resource:

function fetchData() {
  let status = 'pending';
  let result;
  const promise = fetch('/api/data')
    .then(response => response.json())
    .then(
      data => {
        status = 'success';
        result = data;
      },
      error => {
        status = 'error';
        result = error;
      }
    );

  return {
    read() {
      if (status === 'pending') throw promise;
      if (status === 'error') throw result;
      return result;
    }
  };
}

const resource = fetchData();

function DataDisplay() {
  const data = resource.read();
  return <div>Data: {data.message}</div>;
}

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

Important:

• Normal fetch() does not automatically suspend.
• You need either a resource abstraction (like above) or use libraries that integrate Suspense natively.

Future vision: Suspense will make data and UI loading feel unified, smooth, and declarative.

---