Bugfix: Flush legacy sync passive effects at beginning of event (#21846)

* Re-land recent flushSync changes Adds back #21776 and #21775, which were removed due to an internal e2e test failure. Will attempt to fix in subsequent commits. * Failing test: Legacy mode sync passive effects In concurrent roots, if a render is synchronous, we flush its passive effects synchronously. In legacy roots, we don't do this because all updates are synchronous — so we need to flush at the beginning of the next event. This is how `discreteUpdates` worked. * Flush legacy passive effects at beginning of event Fixes test added in previous commit.
facebook · Jul 10, 2021 · 54e88ed · 54e88ed
1 parent cb8afda
commit 54e88ed
Show file tree

Hide file tree

Showing 17 changed files with 184 additions and 337 deletions.
diff --git a/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCache-test.js.snap b/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCache-test.js.snap
@@ -40,7 +40,7 @@ Object {
     6 => 1,
   },
   "passiveEffectDuration": null,
-  "priorityLevel": "Normal",
+  "priorityLevel": "Immediate",
   "timestamp": 16,
   "updaters": Array [
     Object {
@@ -87,7 +87,7 @@ Object {
     4 => 2,
   },
   "passiveEffectDuration": null,
-  "priorityLevel": "Normal",
+  "priorityLevel": "Immediate",
   "timestamp": 15,
   "updaters": Array [
     Object {
@@ -186,7 +186,7 @@ Object {
     6 => 1,
   },
   "passiveEffectDuration": null,
-  "priorityLevel": "Normal",
+  "priorityLevel": "Immediate",
   "timestamp": 12,
   "updaters": Array [
     Object {
@@ -445,7 +445,7 @@ Object {
             ],
           ],
           "passiveEffectDuration": null,
-          "priorityLevel": "Normal",
+          "priorityLevel": "Immediate",
           "timestamp": 12,
           "updaters": Array [
             Object {
@@ -938,7 +938,7 @@ Object {
             ],
           ],
           "passiveEffectDuration": null,
-          "priorityLevel": "Normal",
+          "priorityLevel": "Immediate",
           "timestamp": 11,
           "updaters": Array [
             Object {
@@ -1597,7 +1597,7 @@ Object {
         17 => 1,
       },
       "passiveEffectDuration": null,
-      "priorityLevel": "Normal",
+      "priorityLevel": "Immediate",
       "timestamp": 24,
       "updaters": Array [
         Object {
@@ -1687,7 +1687,7 @@ Object {
       "fiberActualDurations": Map {},
       "fiberSelfDurations": Map {},
       "passiveEffectDuration": 0,
-      "priorityLevel": "Normal",
+      "priorityLevel": "Immediate",
       "timestamp": 34,
       "updaters": Array [
         Object {
@@ -2223,7 +2223,7 @@ Object {
             ],
           ],
           "passiveEffectDuration": null,
-          "priorityLevel": "Normal",
+          "priorityLevel": "Immediate",
           "timestamp": 24,
           "updaters": Array [
             Object {
@@ -2310,7 +2310,7 @@ Object {
           "fiberActualDurations": Array [],
           "fiberSelfDurations": Array [],
           "passiveEffectDuration": 0,
-          "priorityLevel": "Normal",
+          "priorityLevel": "Immediate",
           "timestamp": 34,
           "updaters": Array [
             Object {
@@ -2431,7 +2431,7 @@ Object {
         2 => 0,
       },
       "passiveEffectDuration": null,
-      "priorityLevel": "Normal",
+      "priorityLevel": "Immediate",
       "timestamp": 0,
       "updaters": Array [
         Object {
@@ -2506,7 +2506,7 @@ Object {
     3 => 0,
   },
   "passiveEffectDuration": 0,
-  "priorityLevel": "Normal",
+  "priorityLevel": "Immediate",
   "timestamp": 0,
   "updaters": Array [
     Object {
@@ -2715,7 +2715,7 @@ Object {
             ],
           ],
           "passiveEffectDuration": 0,
-          "priorityLevel": "Normal",
+          "priorityLevel": "Immediate",
           "timestamp": 0,
           "updaters": Array [
             Object {
@@ -3071,7 +3071,7 @@ Object {
     7 => 0,
   },
   "passiveEffectDuration": null,
-  "priorityLevel": "Normal",
+  "priorityLevel": "Immediate",
   "timestamp": 0,
   "updaters": Array [
     Object {
@@ -3515,7 +3515,7 @@ Object {
             ],
           ],
           "passiveEffectDuration": null,
-          "priorityLevel": "Normal",
+          "priorityLevel": "Immediate",
           "timestamp": 0,
           "updaters": Array [
             Object {

diff --git a/packages/react-dom/src/__tests__/ReactDOMFiber-test.js b/packages/react-dom/src/__tests__/ReactDOMFiber-test.js
@@ -1154,19 +1154,13 @@ describe('ReactDOMFiber', () => {
     expect(ops).toEqual(['A']);
 
     if (__DEV__) {
-      const errorCalls = console.error.calls.count();
+      expect(console.error.calls.count()).toBe(2);
       expect(console.error.calls.argsFor(0)[0]).toMatch(
         'ReactDOM.render is no longer supported in React 18',
       );
       expect(console.error.calls.argsFor(1)[0]).toMatch(
         'ReactDOM.render is no longer supported in React 18',
       );
-      // TODO: this warning shouldn't be firing in the first place if user didn't call it.
-      for (let i = 2; i < errorCalls; i++) {
-        expect(console.error.calls.argsFor(i)[0]).toMatch(
-          'unstable_flushDiscreteUpdates: Cannot flush updates when React is already rendering.',
-        );
-      }
     }
   });
 

diff --git a/packages/react-dom/src/__tests__/ReactMount-test.js b/packages/react-dom/src/__tests__/ReactMount-test.js
@@ -277,7 +277,7 @@ describe('ReactMount', () => {
     expect(calls).toBe(5);
   });
 
-  it('initial mount is sync inside batchedUpdates, but task work is deferred until the end of the batch', () => {
+  it('initial mount of legacy root is sync inside batchedUpdates, as if it were wrapped in flushSync', () => {
     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 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');
+      // 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!');
     });
-    // All updates have flushed.
     expect(container1.textContent).toEqual('2');
     expect(container2.textContent).toEqual('a!');
   });

diff --git a/packages/react-dom/src/client/ReactDOM.js b/packages/react-dom/src/client/ReactDOM.js
@@ -23,8 +23,8 @@ import {createEventHandle} from './ReactDOMEventHandle';
 import {
   batchedUpdates,
   discreteUpdates,
-  flushDiscreteUpdates,
   flushSync,
+  flushSyncWithoutWarningIfAlreadyRendering,
   flushControlled,
   injectIntoDevTools,
   attemptSynchronousHydration,
@@ -100,7 +100,7 @@ setRestoreImplementation(restoreControlledState);
 setBatchingImplementation(
   batchedUpdates,
   discreteUpdates,
-  flushDiscreteUpdates,
+  flushSyncWithoutWarningIfAlreadyRendering,
 );
 
 function createPortal(

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

diff --git a/packages/react-dom/src/events/ReactDOMUpdateBatching.js b/packages/react-dom/src/events/ReactDOMUpdateBatching.js
@@ -23,7 +23,7 @@ let batchedUpdatesImpl = function(fn, bookkeeping) {
 let discreteUpdatesImpl = function(fn, a, b, c, d) {
   return fn(a, b, c, d);
 };
-let flushDiscreteUpdatesImpl = function() {};
+let flushSyncImpl = function() {};
 
 let isInsideEventHandler = false;
 
@@ -39,7 +39,7 @@ function finishEventHandler() {
     // bails out of the update without touching the DOM.
     // TODO: Restore state in the microtask, after the discrete updates flush,
     // instead of early flushing them here.
-    flushDiscreteUpdatesImpl();
+    flushSyncImpl();
     restoreStateIfNeeded();
   }
 }
@@ -67,9 +67,9 @@ export function discreteUpdates(fn, a, b, c, d) {
 export function setBatchingImplementation(
   _batchedUpdatesImpl,
   _discreteUpdatesImpl,
-  _flushDiscreteUpdatesImpl,
+  _flushSyncImpl,
 ) {
   batchedUpdatesImpl = _batchedUpdatesImpl;
   discreteUpdatesImpl = _discreteUpdatesImpl;
-  flushDiscreteUpdatesImpl = _flushDiscreteUpdatesImpl;
+  flushSyncImpl = _flushSyncImpl;
 }
diff --git a/packages/react-noop-renderer/src/ReactNoop.js b/packages/react-noop-renderer/src/ReactNoop.js
@@ -38,10 +38,8 @@ export const {
   flushExpired,
   batchedUpdates,
   deferredUpdates,
-  unbatchedUpdates,
   discreteUpdates,
   idleUpdates,
-  flushDiscreteUpdates,
   flushSync,
   flushPassiveEffects,
   act,

diff --git a/packages/react-noop-renderer/src/ReactNoopPersistent.js b/packages/react-noop-renderer/src/ReactNoopPersistent.js
@@ -38,7 +38,6 @@ export const {
   flushExpired,
   batchedUpdates,
   deferredUpdates,
-  unbatchedUpdates,
   discreteUpdates,
   idleUpdates,
   flushDiscreteUpdates,

diff --git a/packages/react-noop-renderer/src/createReactNoop.js b/packages/react-noop-renderer/src/createReactNoop.js
@@ -901,8 +901,6 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
 
     deferredUpdates: NoopRenderer.deferredUpdates,
 
-    unbatchedUpdates: NoopRenderer.unbatchedUpdates,
-
     discreteUpdates: NoopRenderer.discreteUpdates,
 
     idleUpdates<T>(fn: () => T): T {
@@ -915,8 +913,6 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
       }
     },
 
-    flushDiscreteUpdates: NoopRenderer.flushDiscreteUpdates,
-
     flushSync(fn: () => mixed) {
       NoopRenderer.flushSync(fn);
     },

diff --git a/packages/react-reconciler/src/ReactFiberReconciler.js b/packages/react-reconciler/src/ReactFiberReconciler.js
@@ -18,12 +18,11 @@ 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,
-  flushDiscreteUpdates as flushDiscreteUpdates_old,
   flushControlled as flushControlled_old,
   flushSync as flushSync_old,
+  flushSyncWithoutWarningIfAlreadyRendering as flushSyncWithoutWarningIfAlreadyRendering_old,
   flushPassiveEffects as flushPassiveEffects_old,
   getPublicRootInstance as getPublicRootInstance_old,
   attemptSynchronousHydration as attemptSynchronousHydration_old,
@@ -56,12 +55,11 @@ 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,
-  flushDiscreteUpdates as flushDiscreteUpdates_new,
   flushControlled as flushControlled_new,
   flushSync as flushSync_new,
+  flushSyncWithoutWarningIfAlreadyRendering as flushSyncWithoutWarningIfAlreadyRendering_new,
   flushPassiveEffects as flushPassiveEffects_new,
   getPublicRootInstance as getPublicRootInstance_new,
   attemptSynchronousHydration as attemptSynchronousHydration_new,
@@ -99,22 +97,19 @@ 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;
 export const discreteUpdates = enableNewReconciler
   ? discreteUpdates_new
   : discreteUpdates_old;
-export const flushDiscreteUpdates = enableNewReconciler
-  ? flushDiscreteUpdates_new
-  : flushDiscreteUpdates_old;
 export const flushControlled = enableNewReconciler
   ? flushControlled_new
   : flushControlled_old;
 export const flushSync = enableNewReconciler ? flushSync_new : flushSync_old;
+export const flushSyncWithoutWarningIfAlreadyRendering = enableNewReconciler
+  ? flushSyncWithoutWarningIfAlreadyRendering_new
+  : flushSyncWithoutWarningIfAlreadyRendering_old;
 export const flushPassiveEffects = enableNewReconciler
   ? flushPassiveEffects_new
   : flushPassiveEffects_old;

diff --git a/packages/react-reconciler/src/ReactFiberReconciler.new.js b/packages/react-reconciler/src/ReactFiberReconciler.new.js
@@ -52,12 +52,11 @@ import {
   scheduleUpdateOnFiber,
   flushRoot,
   batchedUpdates,
-  unbatchedUpdates,
   flushSync,
   flushControlled,
   deferredUpdates,
   discreteUpdates,
-  flushDiscreteUpdates,
+  flushSyncWithoutWarningIfAlreadyRendering,
   flushPassiveEffects,
 } from './ReactFiberWorkLoop.new';
 import {
@@ -327,12 +326,11 @@ export function updateContainer(
 
 export {
   batchedUpdates,
-  unbatchedUpdates,
   deferredUpdates,
   discreteUpdates,
-  flushDiscreteUpdates,
   flushControlled,
   flushSync,
+  flushSyncWithoutWarningIfAlreadyRendering,
   flushPassiveEffects,
 };
 

diff --git a/packages/react-reconciler/src/ReactFiberReconciler.old.js b/packages/react-reconciler/src/ReactFiberReconciler.old.js
@@ -52,12 +52,11 @@ import {
   scheduleUpdateOnFiber,
   flushRoot,
   batchedUpdates,
-  unbatchedUpdates,
   flushSync,
   flushControlled,
   deferredUpdates,
   discreteUpdates,
-  flushDiscreteUpdates,
+  flushSyncWithoutWarningIfAlreadyRendering,
   flushPassiveEffects,
 } from './ReactFiberWorkLoop.old';
 import {
@@ -327,12 +326,11 @@ export function updateContainer(
 
 export {
   batchedUpdates,
-  unbatchedUpdates,
   deferredUpdates,
   discreteUpdates,
-  flushDiscreteUpdates,
   flushControlled,
   flushSync,
+  flushSyncWithoutWarningIfAlreadyRendering,
   flushPassiveEffects,
 };