Revert "Replace unbatchedUpdates with flushSync (#21776)"

This reverts commit ed6c091.

packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCache-test.js.snap

@@ -40,7 +40,7 @@ Object {
     6 => 1,
   },
   "passiveEffectDuration": null,
-  "priorityLevel": "Immediate",
+  "priorityLevel": "Normal",
   "timestamp": 16,
   "updaters": Array [
     Object {
@@ -87,7 +87,7 @@ Object {
     4 => 2,
   },
   "passiveEffectDuration": null,
-  "priorityLevel": "Immediate",
+  "priorityLevel": "Normal",
   "timestamp": 15,
   "updaters": Array [
     Object {
@@ -186,7 +186,7 @@ Object {
     6 => 1,
   },
   "passiveEffectDuration": null,
-  "priorityLevel": "Immediate",
+  "priorityLevel": "Normal",
   "timestamp": 12,
   "updaters": Array [
     Object {
@@ -445,7 +445,7 @@ Object {
             ],
           ],
           "passiveEffectDuration": null,
-          "priorityLevel": "Immediate",
+          "priorityLevel": "Normal",
           "timestamp": 12,
           "updaters": Array [
             Object {
@@ -938,7 +938,7 @@ Object {
             ],
           ],
           "passiveEffectDuration": null,
-          "priorityLevel": "Immediate",
+          "priorityLevel": "Normal",
           "timestamp": 11,
           "updaters": Array [
             Object {
@@ -1597,7 +1597,7 @@ Object {
         17 => 1,
       },
       "passiveEffectDuration": null,
-      "priorityLevel": "Immediate",
+      "priorityLevel": "Normal",
       "timestamp": 24,
       "updaters": Array [
         Object {
@@ -1687,7 +1687,7 @@ Object {
       "fiberActualDurations": Map {},
       "fiberSelfDurations": Map {},
       "passiveEffectDuration": 0,
-      "priorityLevel": "Immediate",
+      "priorityLevel": "Normal",
       "timestamp": 34,
       "updaters": Array [
         Object {
@@ -2223,7 +2223,7 @@ Object {
             ],
           ],
           "passiveEffectDuration": null,
-          "priorityLevel": "Immediate",
+          "priorityLevel": "Normal",
           "timestamp": 24,
           "updaters": Array [
             Object {
@@ -2310,7 +2310,7 @@ Object {
           "fiberActualDurations": Array [],
           "fiberSelfDurations": Array [],
           "passiveEffectDuration": 0,
-          "priorityLevel": "Immediate",
+          "priorityLevel": "Normal",
           "timestamp": 34,
           "updaters": Array [
             Object {
@@ -2431,7 +2431,7 @@ Object {
         2 => 0,
       },
       "passiveEffectDuration": null,
-      "priorityLevel": "Immediate",
+      "priorityLevel": "Normal",
       "timestamp": 0,
       "updaters": Array [
         Object {
@@ -2506,7 +2506,7 @@ Object {
     3 => 0,
   },
   "passiveEffectDuration": 0,
-  "priorityLevel": "Immediate",
+  "priorityLevel": "Normal",
   "timestamp": 0,
   "updaters": Array [
     Object {
@@ -2715,7 +2715,7 @@ Object {
             ],
           ],
           "passiveEffectDuration": 0,
-          "priorityLevel": "Immediate",
+          "priorityLevel": "Normal",
           "timestamp": 0,
           "updaters": Array [
             Object {
@@ -3071,7 +3071,7 @@ Object {
     7 => 0,
   },
   "passiveEffectDuration": null,
-  "priorityLevel": "Immediate",
+  "priorityLevel": "Normal",
   "timestamp": 0,
   "updaters": Array [
     Object {
@@ -3515,7 +3515,7 @@ Object {
             ],
           ],
           "passiveEffectDuration": null,
-          "priorityLevel": "Immediate",
+          "priorityLevel": "Normal",
           "timestamp": 0,
           "updaters": Array [
             Object {

packages/react-dom/src/__tests__/ReactMount-test.js

@@ -277,7 +277,7 @@ describe('ReactMount', () => {
     expect(calls).toBe(5);
   });
 
-  it('initial mount of legacy root is sync inside batchedUpdates, as if it were wrapped in flushSync', () => {
+  it('initial mount is sync inside batchedUpdates, but task work is deferred until the end of the batch', () => {
     const container1 = document.createElement('div');
     const container2 = document.createElement('div');
 
@@ -302,12 +302,12 @@ describe('ReactMount', () => {
 
       // Initial mount on another root. Should flush immediately.
       ReactDOM.render(<Foo>a</Foo>, container2);
-      // The earlier update also flushed, since flushSync flushes all pending
-      // sync work across all roots.
-      expect(container1.textContent).toEqual('2');
-      // Layout updates are also flushed synchronously
-      expect(container2.textContent).toEqual('a!');
+      // The update did not flush yet.
+      expect(container1.textContent).toEqual('1');
+      // The initial mount flushed, but not the update scheduled in cDM.
+      expect(container2.textContent).toEqual('a');
     });
+    // All updates have flushed.
     expect(container1.textContent).toEqual('2');
     expect(container2.textContent).toEqual('a!');
   });

packages/react-dom/src/client/ReactDOMLegacy.js

@@ -29,7 +29,7 @@ import {
   createContainer,
   findHostInstanceWithNoPortals,
   updateContainer,
-  flushSyncWithoutWarningIfAlreadyRendering,
+  unbatchedUpdates,
   getPublicRootInstance,
   findHostInstance,
   findHostInstanceWithWarning,
@@ -174,7 +174,7 @@ function legacyRenderSubtreeIntoContainer(
       };
     }
     // Initial mount should not be batched.
-    flushSyncWithoutWarningIfAlreadyRendering(() => {
+    unbatchedUpdates(() => {
       updateContainer(children, fiberRoot, parentComponent, callback);
     });
   } else {
@@ -357,7 +357,7 @@ export function unmountComponentAtNode(container: Container) {
     }
 
     // Unmount should not be batched.
-    flushSyncWithoutWarningIfAlreadyRendering(() => {
+    unbatchedUpdates(() => {
       legacyRenderSubtreeIntoContainer(null, null, container, false, () => {
         // $FlowFixMe This should probably use `delete container._reactRootContainer`
         container._reactRootContainer = null;

packages/react-noop-renderer/src/ReactNoop.js

@@ -38,6 +38,7 @@ export const {
   flushExpired,
   batchedUpdates,
   deferredUpdates,
+  unbatchedUpdates,
   discreteUpdates,
   idleUpdates,
   flushSync,

packages/react-noop-renderer/src/ReactNoopPersistent.js

@@ -38,6 +38,7 @@ export const {
   flushExpired,
   batchedUpdates,
   deferredUpdates,
+  unbatchedUpdates,
   discreteUpdates,
   idleUpdates,
   flushDiscreteUpdates,

packages/react-noop-renderer/src/createReactNoop.js

@@ -901,6 +901,8 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
 
     deferredUpdates: NoopRenderer.deferredUpdates,
 
+    unbatchedUpdates: NoopRenderer.unbatchedUpdates,
+
     discreteUpdates: NoopRenderer.discreteUpdates,
 
     idleUpdates<T>(fn: () => T): T {

packages/react-reconciler/src/ReactFiberReconciler.js

@@ -18,6 +18,7 @@ import {
   createContainer as createContainer_old,
   updateContainer as updateContainer_old,
   batchedUpdates as batchedUpdates_old,
+  unbatchedUpdates as unbatchedUpdates_old,
   deferredUpdates as deferredUpdates_old,
   discreteUpdates as discreteUpdates_old,
   flushControlled as flushControlled_old,
@@ -55,6 +56,7 @@ import {
   createContainer as createContainer_new,
   updateContainer as updateContainer_new,
   batchedUpdates as batchedUpdates_new,
+  unbatchedUpdates as unbatchedUpdates_new,
   deferredUpdates as deferredUpdates_new,
   discreteUpdates as discreteUpdates_new,
   flushControlled as flushControlled_new,
@@ -97,6 +99,9 @@ export const updateContainer = enableNewReconciler
 export const batchedUpdates = enableNewReconciler
   ? batchedUpdates_new
   : batchedUpdates_old;
+export const unbatchedUpdates = enableNewReconciler
+  ? unbatchedUpdates_new
+  : unbatchedUpdates_old;
 export const deferredUpdates = enableNewReconciler
   ? deferredUpdates_new
   : deferredUpdates_old;

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

@@ -52,6 +52,7 @@ import {
   scheduleUpdateOnFiber,
   flushRoot,
   batchedUpdates,
+  unbatchedUpdates,
   flushSync,
   flushControlled,
   deferredUpdates,
@@ -326,6 +327,7 @@ export function updateContainer(
 
 export {
   batchedUpdates,
+  unbatchedUpdates,
   deferredUpdates,
   discreteUpdates,
   flushControlled,

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

@@ -52,6 +52,7 @@ import {
   scheduleUpdateOnFiber,
   flushRoot,
   batchedUpdates,
+  unbatchedUpdates,
   flushSync,
   flushControlled,
   deferredUpdates,
@@ -326,6 +327,7 @@ export function updateContainer(
 
 export {
   batchedUpdates,
+  unbatchedUpdates,
   deferredUpdates,
   discreteUpdates,
   flushControlled,

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

@@ -246,11 +246,12 @@ const {
 
 type ExecutionContext = number;
 
-export const NoContext = /*             */ 0b0000;
-const BatchedContext = /*               */ 0b0001;
-const RenderContext = /*                */ 0b0010;
-const CommitContext = /*                */ 0b0100;
-export const RetryAfterError = /*       */ 0b1000;
+export const NoContext = /*             */ 0b00000;
+const BatchedContext = /*               */ 0b00001;
+const LegacyUnbatchedContext = /*       */ 0b00010;
+const RenderContext = /*                */ 0b00100;
+const CommitContext = /*                */ 0b01000;
+export const RetryAfterError = /*       */ 0b10000;
 
 type RootExitStatus = 0 | 1 | 2 | 3 | 4 | 5;
 const RootIncomplete = 0;
@@ -514,19 +515,35 @@ export function scheduleUpdateOnFiber(
     }
   }
 
-  ensureRootIsScheduled(root, eventTime);
-  if (
-    lane === SyncLane &&
-    executionContext === NoContext &&
-    (fiber.mode & ConcurrentMode) === NoMode
-  ) {
-    // Flush the synchronous work now, unless we're already working or inside
-    // a batch. This is intentionally inside scheduleUpdateOnFiber instead of
-    // scheduleCallbackForFiber to preserve the ability to schedule a callback
-    // without immediately flushing it. We only do this for user-initiated
-    // updates, to preserve historical behavior of legacy mode.
-    resetRenderTimer();
-    flushSyncCallbacksOnlyInLegacyMode();
+  if (lane === SyncLane) {
+    if (
+      // Check if we're inside unbatchedUpdates
+      (executionContext & LegacyUnbatchedContext) !== NoContext &&
+      // Check if we're not already rendering
+      (executionContext & (RenderContext | CommitContext)) === NoContext
+    ) {
+      // This is a legacy edge case. The initial mount of a ReactDOM.render-ed
+      // root inside of batchedUpdates should be synchronous, but layout updates
+      // should be deferred until the end of the batch.
+      performSyncWorkOnRoot(root);
+    } else {
+      ensureRootIsScheduled(root, eventTime);
+      if (
+        executionContext === NoContext &&
+        (fiber.mode & ConcurrentMode) === NoMode
+      ) {
+        // Flush the synchronous work now, unless we're already working or inside
+        // a batch. This is intentionally inside scheduleUpdateOnFiber instead of
+        // scheduleCallbackForFiber to preserve the ability to schedule a callback
+        // without immediately flushing it. We only do this for user-initiated
+        // updates, to preserve historical behavior of legacy mode.
+        resetRenderTimer();
+        flushSyncCallbacksOnlyInLegacyMode();
+      }
+    }
+  } else {
+    // Schedule other updates after in case the callback is sync.
+    ensureRootIsScheduled(root, eventTime);
   }
 
   return root;
@@ -1078,6 +1095,25 @@ export function discreteUpdates<A, B, C, D, R>(
   }
 }
 
+export function unbatchedUpdates<A, R>(fn: (a: A) => R, a: A): R {
+  const prevExecutionContext = executionContext;
+  executionContext &= ~BatchedContext;
+  executionContext |= LegacyUnbatchedContext;
+  try {
+    return fn(a);
+  } finally {
+    executionContext = prevExecutionContext;
+    // If there were legacy sync updates, flush them at the end of the outer
+    // most batchedUpdates-like method.
+    if (executionContext === NoContext) {
+      resetRenderTimer();
+      // TODO: I think this call is redundant, because we flush inside
+      // scheduleUpdateOnFiber when LegacyUnbatchedContext is set.
+      flushSyncCallbacksOnlyInLegacyMode();
+    }
+  }
+}
+
 export function flushSyncWithoutWarningIfAlreadyRendering<A, R>(
   fn: A => R,
   a: A,
@@ -1918,6 +1954,24 @@ function commitRootImpl(root, renderPriorityLevel) {
     throw error;
   }
 
+  if ((executionContext & LegacyUnbatchedContext) !== NoContext) {
+    if (__DEV__) {
+      if (enableDebugTracing) {
+        logCommitStopped();
+      }
+    }
+
+    if (enableSchedulingProfiler) {
+      markCommitStopped();
+    }
+
+    // This is a legacy edge case. We just committed the initial mount of
+    // a ReactDOM.render-ed root inside of batchedUpdates. The commit fired
+    // synchronously, but layout updates should be deferred until the end
+    // of the batch.
+    return null;
+  }
+
   // If the passive effects are the result of a discrete render, flush them
   // synchronously at the end of the current task so that the result is
   // immediately observable. Otherwise, we assume that they are not