Bug: `startTransition` not working with `useSyncExternalStore`

SSR content shows a fallback during hydration if there has been an update to an external state, even if wrapped with startTransition.

React version: 18.2.0

Steps To Reproduce

1. Create a basic SSRed React application that would have suspensible content.
2. Create an external store and read its values using useSyncExternalStore in the same component which has suspensible content.
3. Update this external store on the application mount(while hydrating), and wrap this update with startTransition;

Link to code example: https://codesandbox.io/s/react-18-starttransition-not-working-with-usesyncexternalstore-4pxygp

The current behavior

The content shows a fallback while the update is done.

The expected behavior

The content should not show a fallback, but rather update without showing it.

[SuperOleg39]

@stanislav-halyn hi!

I recently met a similar problem, and found answer here - https://github.com/facebook/react/issues/24476#issuecomment-1127800350

In this example, you don’t pass props from user store to suspended component directly. So, just memoize this suspended block:

export default function Layout() {
  const user = useUser();

  useEffect(() => {
    startTransition(() => {
      User.updateUser({
        data: {
          firstName: "Steve"
        }
      });
    });
  }, []);

  const memoizedContent = useMemo(
    () => (
      <Suspense fallback={<Loader />}>
        <LazyContent />
      </Suspense>
    ),
    []
  );

  return (
    <div>
      <header>this is header</header>
      <br />
      <p>user data: {JSON.stringify(user.data)}</p>.
      <br />
      <main>{memoizedContent}</main>
    </div>
  );
}

[gaearon]

Note there’s also another option, which is to not SSR LazyContent either. I.e. you can always emit fallback on the server. Then it won’t be in HTML (which is unfortunate), but you’ll also avoid this problem. If you decide to go that route, you need to throw an Error on the server only from inside the part you want to make client-only (like this lazy content). When you throw an Error on the server, with streaming SSR, the error won’t fail the render. Instead, the server will emit the Suspense fallback. The client will retry rendering when the code loads. During retry, you won’t throw, so lazy content will be able to show up. The error will be reported in the console, but you can pass onRecoverableError with hydrateRoot options, detect your custom Error (e.g. by its message) and silence it because it’s expected. This is a supported way to render client-only content.