You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
In React 19, a Suspense fallback always seems to show for a minimum of a few hundred ms even after a promise has resolved.
I'm unsure if this is a bug, or expected behaviour with the changes to Suspense in React 19, but I noticed this when trying out the 19 beta a few months ago on an app that makes use of Suspense a lot (Relay) and it felt as if the app was being throttled to use 4g due to the delay in the fallback being hidden and the children rendered even after the network request had finished. This was especially perceptible when loading a query on user action, e.g hover.
Reproduction
See the videos and links below for a minimal reproduction. Note how in 18, the fallback is barely a flicker, whereas in 19 the fallback is visible for a few hundred ms.
I immediately hit this too when trying v19. In my case it was using jotai atoms containing a Promise, but found that it also applies when useing a value that's Promise.resolve()d.
#26803 seems to be related. Weird that this is not communicated at all in the changelog or in the upgrade guide?
When we show a fallback, we will throttle the display of the resolved data to avoid layout thrashing. This was an oversight in the changelog. The throttling was always in place but we just expanded it to more cases in 19.
Summary
In React 19, a
Suspense
fallback always seems to show for a minimum of a few hundred ms even after a promise has resolved.I'm unsure if this is a bug, or expected behaviour with the changes to
Suspense
in React 19, but I noticed this when trying out the 19 beta a few months ago on an app that makes use ofSuspense
a lot (Relay) and it felt as if the app was being throttled to use 4g due to the delay in the fallback being hidden and the children rendered even after the network request had finished. This was especially perceptible when loading a query on user action, e.g hover.Reproduction
See the videos and links below for a minimal reproduction. Note how in 18, the fallback is barely a flicker, whereas in 19 the fallback is visible for a few hundred ms.
React 19 Codesandbox
React 18 Codesandbox
React 18.2.0 (expected behaviour)
react-18-suspense.mov
React 19.0
react-19-suspense.mov
The text was updated successfully, but these errors were encountered: