React version: 18.2.0
Steps To Reproduce
-
start a transition (using startTransition) on an external store consumed via useSyncExternalStore that throws a Promise when its getValue function is synchronously evaluated (as a means to suspend the component).
-
The app blows up with an error in the console stating that:
Uncaught Error: A component suspended while responding to synchronous input. This will cause the UI to be replaced with a loading indicator. To fix, updates that suspend should be wrapped with startTransition.
Link to code example: https://codesandbox.io/s/starttransition-usesyncexternalstore-ixsl9o?file=/src/App.js
Please have a look at the code in the sandbox above ^, I've tried my best to create a very lean example which illustrates the issue.
The current behavior
Wrapping the component with Suspense works like a charm. However, when using startTransition, then it blows up.
The expected behavior
I would expect it not to throw the error 😅. I mean, the error specifically states that the fix is to wrap the updates with startTransition, which is precisely what it's being done.
React version: 18.2.0
Steps To Reproduce
start a transition (using
startTransition) on an external store consumed viauseSyncExternalStorethat throws aPromisewhen itsgetValuefunction is synchronously evaluated (as a means to suspend the component).The app blows up with an error in the console stating that:
Link to code example: https://codesandbox.io/s/starttransition-usesyncexternalstore-ixsl9o?file=/src/App.js
Please have a look at the code in the sandbox above ^, I've tried my best to create a very lean example which illustrates the issue.
The current behavior
Wrapping the component with
Suspenseworks like a charm. However, when usingstartTransition, then it blows up.The expected behavior
I would expect it not to throw the error 😅. I mean, the error specifically states that the fix is to wrap the updates with
startTransition, which is precisely what it's being done.