Bug: useSyncExternalStore does not schedule update after mutation about react

[bvaughn]

This is only a bug when used with Activity or does it also happen when a suspended tree unsuspends?

The scope of the bug I've reported here requires Offscreen/Activity.

I'm still trying to write a test for it so that we can pick it up again at a later stage.

@eps1lon I already wrote a test for this in PR #27676

[bvaughn]

If it would be useful, I can create a failing unit test from my Code Sandbox. (Edit: #27676)

I'd also be happy to submit a PR with a proposed fix (but I'm less familiar with this hook's code in particular, so I might not be the best person to do this.)

Either way, let me know if the above would be helpful.

[sophiebits]

If I’m not mistaken, this line is meant to catch if the store was mutated in between render and subscribe (if we were not already subscribed to the store at render time):

react/packages/react-reconciler/src/ReactFiberHooks.js

Line 1689 in 7468903

// Something may have been mutated in between render and commit. This could

Perhaps this code isn’t running at the right time when reviving the tree.

[bvaughn]

Agreed. I think that code only runs during mount or if the getSnapshot function identity has changed. (In this case it doesn’t get run because the hidden to visible transition is an update and getSnapshot is a stable function reference. I tried to mention that in the Loom, but maybe I wasn't very clear.)

[rickhanlonii]

@acdlite are we missing a mutated value check here?

[bvaughn]

Friendly ping.

[eps1lon]

This is only a bug when used with Activity or does it also happen when a suspended tree unsuspends?

If it's just with Activity it may take a while to fix it since it's currently being deprioritized: https://react.dev/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024#offscreen-renamed-to-activity

I'm still trying to write a test for it so that we can pick it up again at a later stage.

[eps1lon]

You can also repro this when you remove the store.set from the parent and move it into a passive effect before the useSyncExternalStore call:

    function App({mode, revision}) {
      return (
        <React.unstable_Activity mode={mode}>
          <Subscriber revision={revision} />
        </React.unstable_Activity>
      );
    }

    function Subscriber({revision: propRevision}) {
      React.useEffect(() => {
        console.log('store.set');
        store.set('revision:' + propRevision);
      }, [propRevision]);
      const revision = useSyncExternalStore(store.subscribe, store.getState);
      return <Text text={revision} />;
    }

If that passive effect is moved after the useSyncExternalStore, it passes again because then React will have subscribed to store changes before the passive effect runs

-React.useEffect(() => {
-  console.log('store.set');
-  store.set('revision:' + propRevision);
-}, [propRevision]);
 const revision = useSyncExternalStore(store.subscribe, store.getState);
+React.useEffect(() => {
+  console.log('store.set');
+  store.set('revision:' + propRevision);
+}, [propRevision]);