Why is MyComponent rendering twice with Suspense?

[functasti]

Hi,

I ran into something a bit unexpected while playing around with Suspense in React 19.1.0 (using Vite 6.3.5, no StrictMode).

Here’s the example:

import { React, Suspense } from "react";

export default function App() {
  return (
    <Suspense fallback={<p>Loading...</p>}>
      <MyComponent />
    </Suspense>
  );
}

function MyComponent() {
  console.log("MyComponent");
  const promise = new Promise(() => {});
  throw promise;
}

When I run this, I see "MyComponent" logged twice, even though the component throws a never resolving promise right away.

My understanding was that React would try to render MyComponent, see the thrown promise, and immediately switch to the fallback without trying to render MyComponent again (since the promise never resolves). So I’m not sure why the component renders twice.

Is this expected behavior with Suspense?

Thanks in advance!

[jheisonnovak]

Hey! I ran into something very similar when testing Suspense in React 19.
From what I could understand, even when a component throws a promise that never resolves, React might try to render it again just to double-check that it's still suspended. I think this is part of how Suspense internally retries renders to make sure things are still in the "loading" state. In my case, I also saw the component render twice and was confused at first. But apparently, it's a normal behavior (even without StrictMode). React seems to do that to keep things consistent when dealing with async components.

Hope that helps!

[MahmoudAbuAwd]

Hi!

What you’re observing is actually expected behavior in React’s Suspense mechanism, especially in React 18 and beyond (including React 19.1.0).

Why does MyComponent render twice even though it throws a never-resolving promise?
When React encounters a thrown Promise inside a component (which is how Suspense works for async rendering), it does not immediately commit the fallback UI. Instead, React tries to prepare the UI tree, rendering components multiple times during the "render phase" before committing anything to the DOM.

Here’s why you see the double rendering:

Initial Render Attempt: React calls MyComponent, which throws a Promise.

Suspense Handling: React catches that Promise and triggers the Suspense fallback.

Re-render Attempt: React tries rendering again to prepare the fallback UI (or to check if anything else can be rendered). Because the Promise never resolves, it still throws.

This results in the component function being called multiple times even though it never commits.

Important points:
React’s rendering behavior is different between the render phase and commit phase.

In the render phase, React can call your components multiple times to figure out what the UI should look like.

Suspense’s fallback UI is only committed after React settles on the render tree.

Because your promise never resolves, React never commits the fallback UI, but still tries rendering the component multiple times internally.

How to verify this:
Try logging inside useEffect or componentDidMount — those only run once when committed, and you won’t see multiple calls.

The multiple calls you see are during rendering, which React can repeat several times for correctness and performance reasons.

TL;DR
Yes, it’s expected that MyComponent renders multiple times if it throws a never-resolving Promise.

React’s Suspense mechanism can call component functions multiple times before committing fallback UI.

This is part of React’s concurrent rendering and is normal behavior.

[mamad34]

Hi!

You're running into a subtle yet expected behavior of React Suspense.

Even though you're not using StrictMode, React may still render components more than once during the Suspense handling process — especially in development mode.

Here's what's happening:

1. When <MyComponent /> throws a Promise, React starts showing the fallback (<p>Loading...</p>).
2. But because you're in development (and using Vite, which may apply some dev optimizations or fast-refresh), React might attempt to re-render the tree to validate behavior, track errors, or prepare for retry logic.
3. This leads to MyComponent running again, even though the promise is never resolving.

This doesn't happen in production builds the same way.

Why does React do this?

While React shouldn't retry rendering for a permanently suspended component (like yours), it may still re-render once more to confirm the suspension and possibly cache the thrown promise in the internal fiber tree.

Also, as of React 18+, useSyncExternalStore, Suspense, and related concurrent features introduce slight differences in dev behavior for consistency and debugging.

✅ Recommendation:

If you want to verify the "true" runtime behavior:

• Try building the app for production (vite build && vite preview) and check the console logs.
• You should see MyComponent only run once.

So yes — what you're seeing is expected in development, and not necessarily a bug.

Let me know if you'd like a deeper dive into how React handles thrown promises internally in the fiber tree!

[functasti]

Thanks to everyone who responded! This issue occurs in both production and development modes. My expectation is that once an exception is thrown, React would discard any Suspense children and render only the fallback component on subsequent renders.
I’d greatly appreciate input from the React team on how this double render behavior aligns with the Suspense protocol, as I haven’t found any documentation that explains this.