Fix production-only updateSyncExternalStore() crash when doing setState in render (facebook#23150)

* Update ReactFiberHooks.new.js

* Add regression test + replace-fork

* Prettier

Co-authored-by: Dan Abramov <dan.abramov@me.com>

Author: 2 people

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

@@ -2471,7 +2471,7 @@ const HooksDispatcherOnRerender: Dispatcher = {
   useDeferredValue: rerenderDeferredValue,
   useTransition: rerenderTransition,
   useMutableSource: updateMutableSource,
-  useSyncExternalStore: mountSyncExternalStore,
+  useSyncExternalStore: updateSyncExternalStore,
   useId: updateId,
 
   unstable_isNewReconciler: enableNewReconciler,

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

@@ -2471,7 +2471,7 @@ const HooksDispatcherOnRerender: Dispatcher = {
   useDeferredValue: rerenderDeferredValue,
   useTransition: rerenderTransition,
   useMutableSource: updateMutableSource,
-  useSyncExternalStore: mountSyncExternalStore,
+  useSyncExternalStore: updateSyncExternalStore,
   useId: updateId,
 
   unstable_isNewReconciler: enableNewReconciler,

packages/use-sync-external-store/src/__tests__/useSyncExternalStoreShared-test.js

@@ -745,6 +745,33 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
     });
   });
 
+  test('regression test for #23150', async () => {
+    const store = createExternalStore('Initial');
+
+    function App() {
+      const text = useSyncExternalStore(store.subscribe, store.getState);
+      const [derivedText, setDerivedText] = useState(text);
+      useEffect(() => {}, []);
+      if (derivedText !== text.toUpperCase()) {
+        setDerivedText(text.toUpperCase());
+      }
+      return <Text text={derivedText} />;
+    }
+
+    const container = document.createElement('div');
+    const root = createRoot(container);
+    await act(() => root.render(<App />));
+
+    expect(Scheduler).toHaveYielded(['INITIAL']);
+    expect(container.textContent).toEqual('INITIAL');
+
+    await act(() => {
+      store.set('Updated');
+    });
+    expect(Scheduler).toHaveYielded(['UPDATED']);
+    expect(container.textContent).toEqual('UPDATED');
+  });
+
   // The selector implementation uses the lazy ref initialization pattern
   // @gate !(enableUseRefAccessWarning && __DEV__)
   test('compares selection to rendered selection even if selector changes', async () => {