Rewrite ReactFiberScheduler for better integration with Scheduler package (#15151)

* Rewrite ReactFiberScheduler

Adds a new implementation of ReactFiberScheduler behind a feature flag.
We will maintain both implementations in parallel until the new one
is proven stable enough to replace the old one.

The main difference between the implementations is that the new one is
integrated with the Scheduler package's priority levels.

* Conditionally add fields to FiberRoot

Some fields only used by the old scheduler, and some by the new.

* Add separate build that enables new scheduler

* Re-enable skipped test

If synchronous updates are scheduled by a passive effect, that work
should be flushed synchronously, even if flushPassiveEffects is
called inside batchedUpdates.

* Passive effects have same priority as render

* Revert ability to cancel the current callback

React doesn't need this anyway because it never schedules callbacks if
it's already rendering.

* Revert change to FiberDebugPerf

Turns out this isn't neccessary.

* Fix ReactFiberScheduler dead code elimination

Should initialize to nothing, then assign the exports conditionally,
instead of initializing to the old exports and then reassigning to the
new ones.

* Don't yield before commit during sync error retry

* Call Scheduler.flushAll unconditionally in tests

Instead of wrapping in enableNewScheduler flag.

Author: acdlite

packages/react-cache/src/LRU.js

@@ -11,7 +11,10 @@ import * as Scheduler from 'scheduler';
 
 // Intentionally not named imports because Rollup would
 // use dynamic dispatch for CommonJS interop named imports.
-const {unstable_scheduleCallback: scheduleCallback} = Scheduler;
+const {
+  unstable_scheduleCallback: scheduleCallback,
+  unstable_IdlePriority: IdlePriority,
+} = Scheduler;
 
 type Entry<T> = {|
   value: T,
@@ -34,7 +37,7 @@ export function createLRU<T>(limit: number) {
       // The cache size exceeds the limit. Schedule a callback to delete the
       // least recently used entries.
       cleanUpIsScheduled = true;
-      scheduleCallback(cleanUp);
+      scheduleCallback(IdlePriority, cleanUp);
     }
   }
 

packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js

@@ -12,6 +12,7 @@
 
 let React;
 let ReactTestRenderer;
+let Scheduler;
 let ReactDebugTools;
 let act;
 
@@ -20,6 +21,7 @@ describe('ReactHooksInspectionIntegration', () => {
     jest.resetModules();
     React = require('react');
     ReactTestRenderer = require('react-test-renderer');
+    Scheduler = require('scheduler');
     act = ReactTestRenderer.act;
     ReactDebugTools = require('react-debug-tools');
   });
@@ -618,6 +620,8 @@ describe('ReactHooksInspectionIntegration', () => {
 
     await LazyFoo;
 
+    Scheduler.flushAll();
+
     let childFiber = renderer.root._currentFiber();
     let tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
     expect(tree).toEqual([

packages/react-dom/src/__tests__/ReactDOMHooks-test.js renamed to packages/react-dom/src/__tests__/ReactDOMHooks-test.internal.js

@@ -9,6 +9,8 @@
 
 'use strict';
 
+let ReactFeatureFlags;
+let enableNewScheduler;
 let React;
 let ReactDOM;
 let Scheduler;
@@ -19,6 +21,8 @@ describe('ReactDOMHooks', () => {
   beforeEach(() => {
     jest.resetModules();
 
+    ReactFeatureFlags = require('shared/ReactFeatureFlags');
+    enableNewScheduler = ReactFeatureFlags.enableNewScheduler;
     React = require('react');
     ReactDOM = require('react-dom');
     Scheduler = require('scheduler');
@@ -97,15 +101,30 @@ describe('ReactDOMHooks', () => {
     }
 
     ReactDOM.render(<Foo />, container);
-    ReactDOM.unstable_batchedUpdates(() => {
-      _set(0); // Forces the effect to be flushed
-      expect(otherContainer.textContent).toBe('');
-      ReactDOM.render(<B />, otherContainer);
-      expect(otherContainer.textContent).toBe('');
-    });
-    expect(otherContainer.textContent).toBe('B');
-    expect(calledA).toBe(false); // It was in a batch
-    expect(calledB).toBe(true);
+
+    if (enableNewScheduler) {
+      // The old behavior was accidental; in the new scheduler, flushing passive
+      // effects also flushes synchronous work, even inside batchedUpdates.
+      ReactDOM.unstable_batchedUpdates(() => {
+        _set(0); // Forces the effect to be flushed
+        expect(otherContainer.textContent).toBe('A');
+        ReactDOM.render(<B />, otherContainer);
+        expect(otherContainer.textContent).toBe('A');
+      });
+      expect(otherContainer.textContent).toBe('B');
+      expect(calledA).toBe(true);
+      expect(calledB).toBe(true);
+    } else {
+      ReactDOM.unstable_batchedUpdates(() => {
+        _set(0); // Forces the effect to be flushed
+        expect(otherContainer.textContent).toBe('');
+        ReactDOM.render(<B />, otherContainer);
+        expect(otherContainer.textContent).toBe('');
+      });
+      expect(otherContainer.textContent).toBe('B');
+      expect(calledA).toBe(false); // It was in a batch
+      expect(calledB).toBe(true);
+    }
   });
 
   it('should not bail out when an update is scheduled from within an event handler', () => {

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

@@ -14,6 +14,7 @@ let ReactDOM;
 let Suspense;
 let ReactCache;
 let ReactTestUtils;
+let Scheduler;
 let TextResource;
 let act;
 
@@ -26,6 +27,7 @@ describe('ReactDOMSuspensePlaceholder', () => {
     ReactDOM = require('react-dom');
     ReactCache = require('react-cache');
     ReactTestUtils = require('react-dom/test-utils');
+    Scheduler = require('scheduler');
     act = ReactTestUtils.act;
     Suspense = React.Suspense;
     container = document.createElement('div');
@@ -94,6 +96,8 @@ describe('ReactDOMSuspensePlaceholder', () => {
 
     await advanceTimers(500);
 
+    Scheduler.flushAll();
+
     expect(divs[0].current.style.display).toEqual('');
     expect(divs[1].current.style.display).toEqual('');
     // This div's display was set with a prop.
@@ -115,6 +119,8 @@ describe('ReactDOMSuspensePlaceholder', () => {
 
     await advanceTimers(500);
 
+    Scheduler.flushAll();
+
     expect(container.textContent).toEqual('ABC');
   });
 
@@ -160,6 +166,8 @@ describe('ReactDOMSuspensePlaceholder', () => {
 
       await advanceTimers(500);
 
+      Scheduler.flushAll();
+
       expect(container.innerHTML).toEqual(
         '<span style="display: inline;">Sibling</span><span style="">Async</span>',
       );

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

@@ -12,6 +12,7 @@
 let React;
 let ReactDOM;
 let ReactDOMServer;
+let Scheduler;
 
 // These tests rely both on ReactDOMServer and ReactDOM.
 // If a test only needs ReactDOMServer, put it in ReactServerRendering-test instead.
@@ -21,6 +22,7 @@ describe('ReactDOMServerHydration', () => {
     React = require('react');
     ReactDOM = require('react-dom');
     ReactDOMServer = require('react-dom/server');
+    Scheduler = require('scheduler');
   });
 
   it('should have the correct mounting behavior (old hydrate API)', () => {
@@ -498,6 +500,7 @@ describe('ReactDOMServerHydration', () => {
 
     jest.runAllTimers();
     await Promise.resolve();
+    Scheduler.flushAll();
     expect(element.textContent).toBe('Hello world');
   });
 });

packages/react-dom/unstable-new-scheduler.js

@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+'use strict';
+
+const ReactDOM = require('./src/client/ReactDOM');
+
+// TODO: decide on the top-level export form.
+// This is hacky but makes it work with both Rollup and Jest.
+module.exports = ReactDOM.default || ReactDOM;

packages/react-reconciler/src/ReactFiberExpirationTime.js

@@ -7,8 +7,17 @@
  * @flow
  */
 
+import type {ReactPriorityLevel} from './SchedulerWithReactIntegration';
+
 import MAX_SIGNED_31_BIT_INT from './maxSigned31BitInt';
 
+import {
+  ImmediatePriority,
+  UserBlockingPriority,
+  NormalPriority,
+  IdlePriority,
+} from './SchedulerWithReactIntegration';
+
 export type ExpirationTime = number;
 
 export const NoWork = 0;
@@ -46,6 +55,8 @@ function computeExpirationBucket(
   );
 }
 
+// TODO: This corresponds to Scheduler's NormalPriority, not LowPriority. Update
+// the names to reflect.
 export const LOW_PRIORITY_EXPIRATION = 5000;
 export const LOW_PRIORITY_BATCH_SIZE = 250;
 
@@ -80,3 +91,31 @@ export function computeInteractiveExpiration(currentTime: ExpirationTime) {
     HIGH_PRIORITY_BATCH_SIZE,
   );
 }
+
+export function inferPriorityFromExpirationTime(
+  currentTime: ExpirationTime,
+  expirationTime: ExpirationTime,
+): ReactPriorityLevel {
+  if (expirationTime === Sync) {
+    return ImmediatePriority;
+  }
+  if (expirationTime === Never) {
+    return IdlePriority;
+  }
+  const msUntil =
+    msToExpirationTime(expirationTime) - msToExpirationTime(currentTime);
+  if (msUntil <= 0) {
+    return ImmediatePriority;
+  }
+  if (msUntil <= HIGH_PRIORITY_EXPIRATION) {
+    return UserBlockingPriority;
+  }
+  if (msUntil <= LOW_PRIORITY_EXPIRATION) {
+    return NormalPriority;
+  }
+
+  // TODO: Handle LowPriority
+
+  // Assume anything lower has idle priority
+  return IdlePriority;
+}

packages/react-reconciler/src/ReactFiberReconciler.js

@@ -43,7 +43,6 @@ import {
   requestCurrentTime,
   computeExpirationForFiber,
   scheduleWork,
-  requestWork,
   flushRoot,
   batchedUpdates,
   unbatchedUpdates,
@@ -300,7 +299,6 @@ export function updateContainer(
 
 export {
   flushRoot,
-  requestWork,
   computeUniqueAsyncExpiration,
   batchedUpdates,
   unbatchedUpdates,