Make time-slicing opt-in (#21072)

* Add enableSyncDefaultUpdates feature flag * Add enableSyncDefaultUpdates implementation * Fix tests * Switch feature flag to true by default * Finish concurrent render whenever for non-sync lanes * Also return DefaultLane with eventLane * Gate interruption test * Add continuout native event test * Fix tests from rebasing main * Hardcode lanes, remove added export * Sync forks
facebook · Apr 9, 2021 · 933880b · 933880b
1 parent b0407b5
commit 933880b
Show file tree

Hide file tree

Showing 46 changed files with 1,996 additions and 538 deletions.
diff --git a/packages/create-subscription/src/__tests__/createSubscription-test.js b/packages/create-subscription/src/__tests__/createSubscription-test.js
@@ -268,6 +268,7 @@ describe('createSubscription', () => {
     expect(Scheduler).toFlushAndYield(['b-1']);
   });
 
+  // @gate experimental || !enableSyncDefaultUpdates
   it('should ignore values emitted by a new subscribable until the commit phase', () => {
     const log = [];
 
@@ -325,7 +326,13 @@ describe('createSubscription', () => {
     expect(log).toEqual(['Parent.componentDidMount']);
 
     // Start React update, but don't finish
-    ReactNoop.render(<Parent observed={observableB} />);
+    if (gate(flags => flags.enableSyncDefaultUpdates)) {
+      React.unstable_startTransition(() => {
+        ReactNoop.render(<Parent observed={observableB} />);
+      });
+    } else {
+      ReactNoop.render(<Parent observed={observableB} />);
+    }
     expect(Scheduler).toFlushAndYieldThrough(['Subscriber: b-0']);
     expect(log).toEqual(['Parent.componentDidMount']);
 
@@ -355,6 +362,7 @@ describe('createSubscription', () => {
     ]);
   });
 
+  // @gate experimental || !enableSyncDefaultUpdates
   it('should not drop values emitted between updates', () => {
     const log = [];
 
@@ -412,7 +420,13 @@ describe('createSubscription', () => {
     expect(log).toEqual(['Parent.componentDidMount']);
 
     // Start React update, but don't finish
-    ReactNoop.render(<Parent observed={observableB} />);
+    if (gate(flags => flags.enableSyncDefaultUpdates)) {
+      React.unstable_startTransition(() => {
+        ReactNoop.render(<Parent observed={observableB} />);
+      });
+    } else {
+      ReactNoop.render(<Parent observed={observableB} />);
+    }
     expect(Scheduler).toFlushAndYieldThrough(['Subscriber: b-0']);
     expect(log).toEqual(['Parent.componentDidMount']);
 

diff --git a/packages/react-art/src/__tests__/ReactART-test.js b/packages/react-art/src/__tests__/ReactART-test.js
@@ -360,6 +360,7 @@ describe('ReactART', () => {
     expect(onClick2).toBeCalled();
   });
 
+  // @gate !enableSyncDefaultUpdates
   it('can concurrently render with a "primary" renderer while sharing context', () => {
     const CurrentRendererContext = React.createContext(null);
 

diff --git a/packages/react-dom/src/__tests__/ReactDOMNativeEventHeuristic-test.js b/packages/react-dom/src/__tests__/ReactDOMNativeEventHeuristic-test.js
@@ -284,6 +284,46 @@ describe('ReactDOMNativeEventHeuristic-test', () => {
     expect(container.textContent).toEqual('hovered');
   });
 
+  // @gate experimental
+  it('continuous native events flush as expected', async () => {
+    const root = ReactDOM.unstable_createRoot(container);
+
+    const target = React.createRef(null);
+    function Foo({hovered}) {
+      const hoverString = hovered ? 'hovered' : 'not hovered';
+      Scheduler.unstable_yieldValue(hoverString);
+      return <div ref={target}>{hoverString}</div>;
+    }
+
+    await act(async () => {
+      root.render(<Foo hovered={false} />);
+    });
+    expect(container.textContent).toEqual('not hovered');
+
+    await act(async () => {
+      // Note: React does not use native mouseenter/mouseleave events
+      // but we should still correctly determine their priority.
+      const mouseEnterEvent = document.createEvent('MouseEvents');
+      mouseEnterEvent.initEvent('mouseover', true, true);
+      target.current.addEventListener('mouseover', () => {
+        root.render(<Foo hovered={true} />);
+      });
+      dispatchAndSetCurrentEvent(target.current, mouseEnterEvent);
+
+      // Since mouse end is not discrete, should not have updated yet
+      expect(Scheduler).toHaveYielded(['not hovered']);
+      expect(container.textContent).toEqual('not hovered');
+
+      expect(Scheduler).toFlushAndYieldThrough(['hovered']);
+      if (gate(flags => flags.enableSyncDefaultUpdates)) {
+        expect(container.textContent).toEqual('hovered');
+      } else {
+        expect(container.textContent).toEqual('not hovered');
+      }
+    });
+    expect(container.textContent).toEqual('hovered');
+  });
+
   // @gate experimental
   it('should batch inside native events', async () => {
     const root = ReactDOM.unstable_createRoot(container);

diff --git a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
@@ -1865,11 +1865,21 @@ describe('ReactDOMServerPartialHydration', () => {
     suspend = true;
 
     await act(async () => {
-      root.render(<App />);
-      expect(Scheduler).toFlushAndYieldThrough(['Before']);
-      // This took a long time to render.
-      Scheduler.unstable_advanceTime(1000);
-      expect(Scheduler).toFlushAndYield(['After']);
+      if (gate(flags => flags.enableSyncDefaultUpdates)) {
+        React.unstable_startTransition(() => {
+          root.render(<App />);
+        });
+
+        expect(Scheduler).toFlushAndYieldThrough(['Before', 'After']);
+      } else {
+        root.render(<App />);
+
+        expect(Scheduler).toFlushAndYieldThrough(['Before']);
+        // This took a long time to render.
+        Scheduler.unstable_advanceTime(1000);
+        expect(Scheduler).toFlushAndYield(['After']);
+      }
+
       // This will cause us to skip the second row completely.
     });
 

diff --git a/packages/react-dom/src/events/__tests__/DOMPluginEventSystem-test.internal.js b/packages/react-dom/src/events/__tests__/DOMPluginEventSystem-test.internal.js
@@ -1934,7 +1934,13 @@ describe('DOMPluginEventSystem', () => {
             log.length = 0;
 
             // Increase counter
-            root.render(<Test counter={1} />);
+            if (gate(flags => flags.enableSyncDefaultUpdates)) {
+              React.unstable_startTransition(() => {
+                root.render(<Test counter={1} />);
+              });
+            } else {
+              root.render(<Test counter={1} />);
+            }
             // Yield before committing
             expect(Scheduler).toFlushAndYieldThrough(['Test']);
 

diff --git a/packages/react-reconciler/src/ReactFiberLane.new.js b/packages/react-reconciler/src/ReactFiberLane.new.js
@@ -52,7 +52,7 @@ export const NoLane: Lane = /*                          */ 0b0000000000000000000
 
 export const SyncLane: Lane = /*                        */ 0b0000000000000000000000000000001;
 
-const InputContinuousHydrationLane: Lane = /*           */ 0b0000000000000000000000000000010;
+export const InputContinuousHydrationLane: Lane = /*    */ 0b0000000000000000000000000000010;
 export const InputContinuousLane: Lanes = /*            */ 0b0000000000000000000000000000100;
 
 export const DefaultHydrationLane: Lane = /*            */ 0b0000000000000000000000000001000;

diff --git a/packages/react-reconciler/src/ReactFiberLane.old.js b/packages/react-reconciler/src/ReactFiberLane.old.js
@@ -52,7 +52,7 @@ export const NoLane: Lane = /*                          */ 0b0000000000000000000
 
 export const SyncLane: Lane = /*                        */ 0b0000000000000000000000000000001;
 
-const InputContinuousHydrationLane: Lane = /*           */ 0b0000000000000000000000000000010;
+export const InputContinuousHydrationLane: Lane = /*    */ 0b0000000000000000000000000000010;
 export const InputContinuousLane: Lanes = /*            */ 0b0000000000000000000000000000100;
 
 export const DefaultHydrationLane: Lane = /*            */ 0b0000000000000000000000000001000;

diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -32,6 +32,7 @@ import {
   disableSchedulerTimeoutInWorkLoop,
   enableStrictEffects,
   skipUnmountedBoundaries,
+  enableSyncDefaultUpdates,
   enableUpdaterTracking,
 } from 'shared/ReactFeatureFlags';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
@@ -138,6 +139,10 @@ import {
   NoLanes,
   NoLane,
   SyncLane,
+  DefaultLane,
+  DefaultHydrationLane,
+  InputContinuousLane,
+  InputContinuousHydrationLane,
   NoTimestamp,
   claimNextTransitionLane,
   claimNextRetryLane,
@@ -433,6 +438,13 @@ export function requestUpdateLane(fiber: Fiber): Lane {
   // TODO: Move this type conversion to the event priority module.
   const updateLane: Lane = (getCurrentUpdatePriority(): any);
   if (updateLane !== NoLane) {
+    if (
+      enableSyncDefaultUpdates &&
+      (updateLane === InputContinuousLane ||
+        updateLane === InputContinuousHydrationLane)
+    ) {
+      return DefaultLane;
+    }
     return updateLane;
   }
 
@@ -443,6 +455,13 @@ export function requestUpdateLane(fiber: Fiber): Lane {
   // use that directly.
   // TODO: Move this type conversion to the event priority module.
   const eventLane: Lane = (getCurrentEventPriority(): any);
+  if (
+    enableSyncDefaultUpdates &&
+    (eventLane === InputContinuousLane ||
+      eventLane === InputContinuousHydrationLane)
+  ) {
+    return DefaultLane;
+  }
   return eventLane;
 }
 
@@ -695,7 +714,16 @@ function ensureRootIsScheduled(root: FiberRoot, currentTime: number) {
 
   // Schedule a new callback.
   let newCallbackNode;
-  if (newCallbackPriority === SyncLane) {
+  if (
+    enableSyncDefaultUpdates &&
+    (newCallbackPriority === DefaultLane ||
+      newCallbackPriority === DefaultHydrationLane)
+  ) {
+    newCallbackNode = scheduleCallback(
+      ImmediateSchedulerPriority,
+      performSyncWorkOnRoot.bind(null, root),
+    );
+  } else if (newCallbackPriority === SyncLane) {
     // Special case: Sync React callbacks are scheduled on a special
     // internal queue
     scheduleSyncCallback(performSyncWorkOnRoot.bind(null, root));
@@ -1030,7 +1058,11 @@ function performSyncWorkOnRoot(root) {
   const finishedWork: Fiber = (root.current.alternate: any);
   root.finishedWork = finishedWork;
   root.finishedLanes = lanes;
-  commitRoot(root);
+  if (enableSyncDefaultUpdates && !includesSomeLane(lanes, SyncLane)) {
+    finishConcurrentRender(root, exitStatus, lanes);
+  } else {
+    commitRoot(root);
+  }
 
   // Before exiting, make sure there's a callback scheduled for the next
   // pending level.

diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -32,6 +32,7 @@ import {
   disableSchedulerTimeoutInWorkLoop,
   enableStrictEffects,
   skipUnmountedBoundaries,
+  enableSyncDefaultUpdates,
   enableUpdaterTracking,
 } from 'shared/ReactFeatureFlags';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
@@ -138,6 +139,10 @@ import {
   NoLanes,
   NoLane,
   SyncLane,
+  DefaultLane,
+  DefaultHydrationLane,
+  InputContinuousLane,
+  InputContinuousHydrationLane,
   NoTimestamp,
   claimNextTransitionLane,
   claimNextRetryLane,
@@ -433,6 +438,13 @@ export function requestUpdateLane(fiber: Fiber): Lane {
   // TODO: Move this type conversion to the event priority module.
   const updateLane: Lane = (getCurrentUpdatePriority(): any);
   if (updateLane !== NoLane) {
+    if (
+      enableSyncDefaultUpdates &&
+      (updateLane === InputContinuousLane ||
+        updateLane === InputContinuousHydrationLane)
+    ) {
+      return DefaultLane;
+    }
     return updateLane;
   }
 
@@ -443,6 +455,13 @@ export function requestUpdateLane(fiber: Fiber): Lane {
   // use that directly.
   // TODO: Move this type conversion to the event priority module.
   const eventLane: Lane = (getCurrentEventPriority(): any);
+  if (
+    enableSyncDefaultUpdates &&
+    (eventLane === InputContinuousLane ||
+      eventLane === InputContinuousHydrationLane)
+  ) {
+    return DefaultLane;
+  }
   return eventLane;
 }
 
@@ -695,7 +714,16 @@ function ensureRootIsScheduled(root: FiberRoot, currentTime: number) {
 
   // Schedule a new callback.
   let newCallbackNode;
-  if (newCallbackPriority === SyncLane) {
+  if (
+    enableSyncDefaultUpdates &&
+    (newCallbackPriority === DefaultLane ||
+      newCallbackPriority === DefaultHydrationLane)
+  ) {
+    newCallbackNode = scheduleCallback(
+      ImmediateSchedulerPriority,
+      performSyncWorkOnRoot.bind(null, root),
+    );
+  } else if (newCallbackPriority === SyncLane) {
     // Special case: Sync React callbacks are scheduled on a special
     // internal queue
     scheduleSyncCallback(performSyncWorkOnRoot.bind(null, root));
@@ -1030,7 +1058,11 @@ function performSyncWorkOnRoot(root) {
   const finishedWork: Fiber = (root.current.alternate: any);
   root.finishedWork = finishedWork;
   root.finishedLanes = lanes;
-  commitRoot(root);
+  if (enableSyncDefaultUpdates && !includesSomeLane(lanes, SyncLane)) {
+    finishConcurrentRender(root, exitStatus, lanes);
+  } else {
+    commitRoot(root);
+  }
 
   // Before exiting, make sure there's a callback scheduled for the next
   // pending level.

diff --git a/...ler/src/__tests__/ReactDisableSchedulerTimeoutBasedOnReactExpirationTime-test.internal.js b/...ler/src/__tests__/ReactDisableSchedulerTimeoutBasedOnReactExpirationTime-test.internal.js
@@ -45,6 +45,7 @@ describe('ReactSuspenseList', () => {
     return Component;
   }
 
+  // @gate experimental || !enableSyncDefaultUpdates
   it('appends rendering tasks to the end of the priority queue', async () => {
     const A = createAsyncText('A');
     const B = createAsyncText('B');
@@ -63,7 +64,13 @@ describe('ReactSuspenseList', () => {
     root.render(<App show={false} />);
     expect(Scheduler).toFlushAndYield([]);
 
-    root.render(<App show={true} />);
+    if (gate(flags => flags.enableSyncDefaultUpdates)) {
+      React.unstable_startTransition(() => {
+        root.render(<App show={true} />);
+      });
+    } else {
+      root.render(<App show={true} />);
+    }
     expect(Scheduler).toFlushAndYield([
       'Suspend! [A]',
       'Suspend! [B]',