Bug: Unexpected Suspense SSR Component Behavior with useSyncExternalStore in React 18.3.0-next: Rerender and Fallback State Issues

[mgiedrius]

The bug relates to #26318. In React 18.2.0 this case prints an error but the functionality seems unexpected. In 18.3.0-next-9c54b29b4-20230322 it doesn't print an error, but unexpected functionality still exists.

React version: 18.3.0-next-9c54b29b4-20230322

Steps To Reproduce

1. Use Suspense SSR and useSyncExternalStore in the same component.
2. Ensure that the serverSnapshot and snapshot in useSyncExternalStore are different.
3. Suspended component on the client side fully rerenders. Falls into a fallback state and then renders its content.

Link to code example: https://codesandbox.io/p/sandbox/usesyncexternalstore-suspense-bug-forked-drm325

The current behavior

The suspended component on the client side fully rerenders. Falls into a fallback state and then renders its content. Due to a mismatch between serverSnapshot and snapshot when using Suspense and useSyncExternalStore in the same component.

The expected behaviour

The suspended component doesn't do a full rerender(falls into a fallback state and then renders its content):

• if the serverSnapshot and snapshot are identical.
• if the useSyncExternalStore has a mismatch between serverSnapshot and snapshot and is used in a component without a Suspense boundary.

I assume the expected behaviour should be: the suspended component shouldn't do a full rerender(fall into a fallback state and then render its content) when useSyncExternalStore is used with Suspense in the same component. I assume it shouldn't fall into a fallback state it should just do a rerender.

Additional context

One use case when snapshot and serverSnapshot may be different:
The latest version of the react-redux library under the hood uses useSyncExternalStore. For example, if we have 2 different hydrateRoot entries for header and for body and we need them to share the same redux store. One issue that occurs with this setup is that if the header is hydrated earlier than the body the header will start firing store updates while the body is still hydrating and this will cause serverSnapshot and snapshot to be different while the body is still hydrating and because of this suspended SSR components will fall into the fallback state if redux state selector and Suspense boundary are used in the same component.

[github-actions]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[github-actions]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!