Expiration times (#10426)

* [Work-in-progress] Assign expiration times to updates

An expiration time represents a time in the future by which an update
should flush. The priority of the update is related to the difference
between the current clock time and the expiration time. This has the
effect of increasing the priority of updates as time progresses, to
prevent starvation.

This lays the initial groundwork for expiration times without changing
any behavior. Future commits will replace work priority with
expiration times.

* Replace pendingWorkPriority with expiration times

Instead of a priority, a fiber has an expiration time that represents
a point in the future by which it should render.

Pending updates still have priorities so that they can be coalesced.

We use a host config method to read the current time. This commit
implements everything except that method, which currently returns a
constant value. So this just proves that expiration times work the same
as priorities when time is frozen. Subsequent commits will show the
effect of advancing time.

* Triangle Demo should use a class

shouldComponentUpdate was removed from functional components.

Running the demo shows, now that expiration is enabled, the demo does
not starve. (Still won't run smoothly until we add back the ability to
resume interrupted work.)

* Use a magic value for task expiration time

There are a few cases related to sync mode where we need to distinguish
between work that is scheduled as task and work that is treated like
task because it expires. For example, batchedUpdates. We don't want to
perform any work until the end of the batch, regardless of how much
time has elapsed.

* Use current time to calculate expiration time

* Add unit tests for expiration and coalescing

* Delete unnecessary abstraction

* Move performance.now polyfill to ReactDOMFrameScheduling

* Add expiration to fuzz tester

* Expiration nits

- Rename Done -> NoWork
- Use max int32 instead of max safe int
- Use bitwise operations instead of Math functions

fixtures/fiber-triangle/index.html

@@ -76,51 +76,54 @@ <h1>Fiber Example</h1>
         }
       }
 
-      function SierpinskiTriangle({ x, y, s, children }) {
-        if (s <= targetSize) {
-          return (
-            <Dot
-              x={x - (targetSize / 2)}
-              y={y - (targetSize / 2)}
-              size={targetSize}
-              text={children}
-            />
+      class SierpinskiTriangle extends React.Component {
+        shouldComponentUpdate(nextProps) {
+          var o = this.props;
+          var n = nextProps;
+          return !(
+            o.x === n.x &&
+            o.y === n.y &&
+            o.s === n.s &&
+            o.children === n.children
           );
-          return r;
         }
-        var newSize = s / 2;
-        var slowDown = true;
-        if (slowDown) {
-          var e = performance.now() + 0.8;
-          while (performance.now() < e) {
-            // Artificially long execution time.
+        render() {
+          let {x, y, s, children} = this.props;
+          if (s <= targetSize) {
+            return (
+              <Dot
+                x={x - (targetSize / 2)}
+                y={y - (targetSize / 2)}
+                size={targetSize}
+                text={children}
+              />
+            );
+            return r;
+          }
+          var newSize = s / 2;
+          var slowDown = true;
+          if (slowDown) {
+            var e = performance.now() + 0.8;
+            while (performance.now() < e) {
+              // Artificially long execution time.
+            }
           }
-        }
 
-        s /= 2;
+          s /= 2;
 
-        return [
-          <SierpinskiTriangle x={x} y={y - (s / 2)} s={s}>
-            {children}
-          </SierpinskiTriangle>,
-          <SierpinskiTriangle x={x - s} y={y + (s / 2)} s={s}>
-            {children}
-          </SierpinskiTriangle>,
-          <SierpinskiTriangle x={x + s} y={y + (s / 2)} s={s}>
-            {children}
-          </SierpinskiTriangle>,
-        ];
+          return [
+            <SierpinskiTriangle x={x} y={y - (s / 2)} s={s}>
+              {children}
+            </SierpinskiTriangle>,
+            <SierpinskiTriangle x={x - s} y={y + (s / 2)} s={s}>
+              {children}
+            </SierpinskiTriangle>,
+            <SierpinskiTriangle x={x + s} y={y + (s / 2)} s={s}>
+              {children}
+            </SierpinskiTriangle>,
+          ];
+        }
       }
-      SierpinskiTriangle.shouldComponentUpdate = function(oldProps, newProps) {
-        var o = oldProps;
-        var n = newProps;
-        return !(
-          o.x === n.x &&
-          o.y === n.y &&
-          o.s === n.s &&
-          o.children === n.children
-        );
-      };
 
       class ExampleApplication extends React.Component {
         constructor() {

src/renderers/art/ReactARTFiberEntry.js

@@ -532,6 +532,8 @@ const ARTRenderer = ReactFiberReconciler({
     );
   },
 
+  now: ReactDOMFrameScheduling.now,
+
   useSyncScheduling: true,
 });
 

src/renderers/dom/fiber/ReactDOMFiberEntry.js

@@ -437,6 +437,8 @@ var DOMRenderer = ReactFiberReconciler({
     }
   },
 
+  now: ReactDOMFrameScheduling.now,
+
   canHydrateInstance(
     instance: Instance | TextInstance,
     type: string,

src/renderers/native-rt/ReactNativeRTFiberRenderer.js

@@ -227,6 +227,11 @@ const NativeRTRenderer = ReactFiberReconciler({
   },
 
   useSyncScheduling: true,
+
+  now(): number {
+    // TODO: Enable expiration by implementing this method.
+    return 0;
+  },
 });
 
 module.exports = NativeRTRenderer;

src/renderers/native/ReactNativeFiberRenderer.js

@@ -377,6 +377,11 @@ const NativeRenderer = ReactFiberReconciler({
   },
 
   useSyncScheduling: true,
+
+  now(): number {
+    // TODO: Enable expiration by implementing this method.
+    return 0;
+  },
 });
 
 module.exports = NativeRenderer;

src/renderers/noop/ReactNoopEntry.js

@@ -83,6 +83,8 @@ function removeChild(
   parentInstance.children.splice(index, 1);
 }
 
+let elapsedTimeInMs = 0;
+
 var NoopRenderer = ReactFiberReconciler({
   getRootHostContext() {
     if (failInBeginPhase) {
@@ -201,6 +203,10 @@ var NoopRenderer = ReactFiberReconciler({
   prepareForCommit(): void {},
 
   resetAfterCommit(): void {},
+
+  now(): number {
+    return elapsedTimeInMs;
+  },
 });
 
 var rootContainers = new Map();
@@ -336,6 +342,14 @@ var ReactNoop = {
     expect(actual).toEqual(expected);
   },
 
+  expire(ms: number): void {
+    elapsedTimeInMs += ms;
+  },
+
+  flushExpired(): Array<mixed> {
+    return ReactNoop.flushUnitsOfWork(0);
+  },
+
   yield(value: mixed) {
     if (yieldedValues === null) {
       yieldedValues = [value];
@@ -400,15 +414,15 @@ var ReactNoop = {
         '  '.repeat(depth + 1) + '~',
         firstUpdate && firstUpdate.partialState,
         firstUpdate.callback ? 'with callback' : '',
-        '[' + firstUpdate.priorityLevel + ']',
+        '[' + firstUpdate.expirationTime + ']',
       );
       var next;
       while ((next = firstUpdate.next)) {
         log(
           '  '.repeat(depth + 1) + '~',
           next.partialState,
           next.callback ? 'with callback' : '',
-          '[' + firstUpdate.priorityLevel + ']',
+          '[' + firstUpdate.expirationTime + ']',
         );
       }
     }
@@ -418,7 +432,7 @@ var ReactNoop = {
         '  '.repeat(depth) +
           '- ' +
           (fiber.type ? fiber.type.name || fiber.type : '[root]'),
-        '[' + fiber.pendingWorkPriority + (fiber.pendingProps ? '*' : '') + ']',
+        '[' + fiber.expirationTime + (fiber.pendingProps ? '*' : '') + ']',
       );
       if (fiber.updateQueue) {
         logUpdateQueue(fiber.updateQueue, depth);

src/renderers/shared/ReactDOMFrameScheduling.js

@@ -37,6 +37,20 @@ if (__DEV__) {
   }
 }
 
+const hasNativePerformanceNow =
+  typeof performance === 'object' && typeof performance.now === 'function';
+
+let now;
+if (hasNativePerformanceNow) {
+  now = function() {
+    return performance.now();
+  };
+} else {
+  now = function() {
+    return Date.now();
+  };
+}
+
 // TODO: There's no way to cancel, because Fiber doesn't atm.
 let rIC: (callback: (deadline: Deadline) => void) => number;
 
@@ -67,19 +81,23 @@ if (!ExecutionEnvironment.canUseDOM) {
   var previousFrameTime = 33;
   var activeFrameTime = 33;
 
-  var frameDeadlineObject = {
-    timeRemaining: typeof performance === 'object' &&
-      typeof performance.now === 'function'
-      ? function() {
-          // We assume that if we have a performance timer that the rAF callback
-          // gets a performance timer value. Not sure if this is always true.
-          return frameDeadline - performance.now();
-        }
-      : function() {
-          // As a fallback we use Date.now.
-          return frameDeadline - Date.now();
-        },
-  };
+  var frameDeadlineObject;
+  if (hasNativePerformanceNow) {
+    frameDeadlineObject = {
+      timeRemaining() {
+        // We assume that if we have a performance timer that the rAF callback
+        // gets a performance timer value. Not sure if this is always true.
+        return frameDeadline - performance.now();
+      },
+    };
+  } else {
+    frameDeadlineObject = {
+      timeRemaining() {
+        // Fallback to Date.now()
+        return frameDeadline - Date.now();
+      },
+    };
+  }
 
   // We use the postMessage trick to defer idle work until after the repaint.
   var messageKey = '__reactIdleCallback$' + Math.random().toString(36).slice(2);
@@ -153,4 +171,5 @@ if (!ExecutionEnvironment.canUseDOM) {
   rIC = requestIdleCallback;
 }
 
+exports.now = now;
 exports.rIC = rIC;