Bug: `startTransition` doesn't work with `useSyncExternalStore`

[josepot]

React version: 18.2.0

Steps To Reproduce

1. 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).

2. 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.

[gaearon]

A useSyncExternalStore update can't be a transition — that's why it's a "sync" external store. Only React-managed state like useState or useReducer can be updated in a transition. That's the tradeoff of useSyncExternalStore, and why it's only recommended to use if you can't let React drive the state updates.

[josepot]

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 startTransition docs, nor anywhere else on the docs of usSyncExternalStore. 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]

On the other hand useSyncExternalStore can work with deferredValue. I feel unbalanced.