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
[React 19] When multiple components call use inside a Suspense, it crosses the boundary of Suspense and stops rendering of other Suspense as well
#29905
Open
yatsuna827 opened this issue
Jun 15, 2024
· 2 comments
The two components <Expected>👍 and <Unexpected>🤔 are expected to behave in the same way. That is, No.1 to No.3 should be displayed one second apart, and No.4 and No.5 should be displayed two seconds after No.3 is displayed.
There is a difference in the waiting time for No.4 between <Expected> and <Unexpected>, being 4 seconds or 3 seconds, but since they are wrapped together in <Suspense> with No.5, they should be throttled and displayed after 5 seconds.
However, in <Unexpected>, not only that, but No.3, which should belong to a different <Suspense> scope, is also displayed after 5 seconds. This seems to break the behavior of <Suspense>.
Please note that this is a different issue from the one being discussed in #26380. I am issuing a Promise outside of Suspense and passing it as props.
The text was updated successfully, but these errors were encountered:
Furthermore, I have investigated a few more examples. When using a class like Recoil's Loadable instead of the use API, this issue does not occur.
And by wrapping Loadable and use in the same Suspense, the strange behavior of use becomes clear. When multiple Promises are thrown within a single Suspense, it seems that allSuspense boundaries are halted until the Promise thrown by use is resolved. This does not seem like the intended behavior to me.
Summary
https://codesandbox.io/p/sandbox/use-and-suspense-hlcjk6
The two components
<Expected>
👍 and<Unexpected>
🤔 are expected to behave in the same way. That is, No.1 to No.3 should be displayed one second apart, and No.4 and No.5 should be displayed two seconds after No.3 is displayed.There is a difference in the waiting time for No.4 between
<Expected>
and<Unexpected>
, being 4 seconds or 3 seconds, but since they are wrapped together in<Suspense>
with No.5, they should be throttled and displayed after 5 seconds.However, in
<Unexpected>
, not only that, but No.3, which should belong to a different<Suspense>
scope, is also displayed after 5 seconds. This seems to break the behavior of<Suspense>
.Please note that this is a different issue from the one being discussed in #26380. I am issuing a Promise outside of Suspense and passing it as props.
The text was updated successfully, but these errors were encountered: