React 19 Beta: Component Suspense Not Fallbacking as Expected

[jasgigli]

React 19 Beta: Component Suspense Not Fallbacking as Expected

I'm experiencing an issue with the Suspense feature in React 19 beta. The fallback component is not rendering when the child component is in a suspended state, leading to a blank screen instead of the intended loading indicator.

Steps to Reproduce:

1. Create a simple component that fetches data asynchronously.
2. Wrap the component with <Suspense fallback={<Loading />} />.
3. Trigger the fetch operation that causes the component to suspend.
4. Observe that the fallback is not displayed, and the screen remains blank.

Expected Behavior:

I expected the <Loading /> component to display while the data is being fetched.

Actual Behavior:

The screen remains blank instead of showing the fallback component.

Code Snippet:

App

import React, { Suspense } from "react";
import Loading from "./components/Loading";
import TestComponent from "./components/TestComponent";

const App = () => {
  return (
    <Suspense fallback={<Loading />}>
      <TestComponent />
    </Suspense>
  );
};

export default App;

TestComponent

import React, { useState, useEffect } from "react";

const TestComponent = () => {
  const [data, setData] = useState(null);

  // Simulate data fetching
  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch("https://fakestoreapi.com/users");
      const result = await response.json();
      setData(result);
    };
    fetchData();
  }, []);

  if (!data) {
    throw new Promise(() => {}); // Intentionally suspends the component
  }

  return <div>Data: {data}</div>;
};

export default TestComponent;

Loading Component

import React from "react";
import "./Loading.css"; // Import the CSS file for styles

const Loading = () => {
  return (
    <div className="loading-container">
      <h1 className="loading-title">Loading...</h1>
      <div className="spinner"></div>
      <h2 className="loading-subtitle">Please wait JasGiigli</h2>
    </div>
  );
};

export default Loading;

Environment

• React Version: 19 beta
• Node Version: v22.8.0
• Operating System: Windows 10
• Browser:Google Chrome Version 129.0.6668.90 (Official Build) (64-bit)

Additional Context

I have tested this issue with the latest React 19 beta. It seems that the fallback component is not being activated as expected during the data fetching process. Please let me know if you need any further details or if there are specific scenarios you'd like me to test.

Thank you for your attention to this issue.

[eps1lon]

In React 19, you should put the Promise in state and unwrap it with React.use to trigger Suspense. Throwing a Promise is not the recommended pattern and will be deprecated in the future. I'm also pretty sure you're not using the throw-Promise pattern correctly.

[jasgigli]

Thank you so much, eps1lon! Your explanation really clarifies the correct approach for handling Promises in React 19. I appreciate you pointing out the deprecation of the throw-Promise pattern and suggesting the use of state with React.use for Suspense. This was super helpful—thanks again!