Repository navigation
Bug: startTransition doesn't work with useSyncExternalStore #26382
Description
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:
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.
Activity
gaearon commentedon Mar 13, 2023
A
useSyncExternalStoreupdate can't be a transition — that's why it's a "sync" external store. Only React-managed state likeuseStateoruseReducercan be updated in a transition. That's the tradeoff ofuseSyncExternalStore, and why it's only recommended to use if you can't let React drive the state updates.josepot commentedon Mar 13, 2023
Hi @gaearon!
First and foremost: thanks a lot for such a quick replay!
Yeah, I suppose that makes sense. I actually suspected that could have been the case. However, I did check in the docs and there was no mention of this on the "caveats" section of the
startTransitiondocs, nor anywhere else on the docs ofusSyncExternalStore. So yeah, that combined with the fact that the error is a bit misleading, made me think that perhaps this was a bug.Please understand that I'm not complaining, I'm just sharing this feedback so that these things can be improved. Although, I'm sure that you must have bigger fish to fry. Anyways, I will try to find some time during this week to open a PR to -at least- try to improve the docs.
Thanks again!
uniho commentedon Mar 7, 2024
On the other hand
useSyncExternalStorecan work withdeferredValue. I feel unbalanced.