Clarify Behavior of useSyncExternalStore When Using Server-Side Rendering (SSR)

[AndyN5]

Title:

Clarify Behavior of useSyncExternalStore When Using Server-Side Rendering (SSR)

Description:

After reviewing PR #29760, which addresses the optimization of useSyncExternalStore in React, I noticed that the behavior of this hook when used in server-side rendering (SSR) scenarios isn't clearly documented. Specifically, the following points need clarification: How should developers manage subscriptions during SSR? What best practices should be followed to avoid potential inconsistencies when hydrating the client-side store?

React version: 19

Steps To Reproduce

1. Set up the environment: Include details about the environment where the issue occurs (e.g., React version, Node.js version, browser, etc.).
2. Create a minimal project: Describe how to create a minimal reproducible example that isolates the bug (e.g., a simple React app using create-react-app).
3. Write relevant code: Provide the key parts of the code where the issue happens (e.g., using a specific React feature, hook, or component).
4. Run the project: Explain how to execute the project to trigger the bug.
5. Observe the behavior: Describe what happens when the steps are followed (the actual behavior), compared to what you expected to happen.

Link to code example:

Please use one of the following techniques to produce a simple, replicable sample of the bug:

Give a link to a CodeSandbox project that illustrates the problem.
GitHub Repository: Provide a link to a small project on GitHub that replicates the issue.
Inline Code: Use appropriate formatting to include the code right in the bug report if it is brief and simple.

The current behavior

There isn't much advice on SSR-specific circumstances in the present material.

The expected behavior

The documentation should explicitly detail how useSyncExternalStore interacts with SSR.
Provide examples of correct usage in SSR and hydration contexts.

References

• Related Pull Request: 29760