Use currentEventTransitionLane

Author: tyao1

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

@@ -16,6 +16,7 @@ let ReactDOMClient;
 let Scheduler;
 let act;
 let waitForAll;
+let waitFor;
 let assertLog;
 
 const setUntrackedInputValue = Object.getOwnPropertyDescriptor(
@@ -37,6 +38,7 @@ describe('ReactDOMFiberAsync', () => {
 
     const InternalTestUtils = require('internal-test-utils');
     waitForAll = InternalTestUtils.waitForAll;
+    waitFor = InternalTestUtils.waitFor;
     assertLog = InternalTestUtils.assertLog;
 
     document.body.appendChild(container);
@@ -567,7 +569,7 @@ describe('ReactDOMFiberAsync', () => {
     expect(container.textContent).toBe('new');
   });
 
-  it('should synchronously render the transition lane in a popState', async () => {
+  it('should synchronously render the transition lane scheduled in a popState', async () => {
     function App() {
       const [syncState, setSyncState] = React.useState(false);
       const [hasNavigated, setHasNavigated] = React.useState(false);
@@ -579,11 +581,8 @@ describe('ReactDOMFiberAsync', () => {
         setSyncState(true);
 
         // Jest is not emulating window.event correctly in the microtask
-        const currentEvent = window.event;
-        window.event = currentEvent;
-        queueMicrotask(() => {
-          window.event = null;
-        });
+        // TODO: this causes `window.event` to always be popState in this test file
+        window.event = window.event;
       }
       React.useEffect(() => {
         window.addEventListener('popstate', onPopstate);
@@ -607,4 +606,45 @@ describe('ReactDOMFiberAsync', () => {
 
     root.unmount();
   });
+
+  it('should not flush transition lanes if there is no transition scheduled in popState', async () => {
+    let _setHasNavigated;
+    function App({shouldTransition}) {
+      const [syncState, setSyncState] = React.useState(false);
+      const [hasNavigated, setHasNavigated] = React.useState(false);
+      _setHasNavigated = setHasNavigated;
+      function onPopstate() {
+        setSyncState(true);
+
+        // Jest is not emulating window.event correctly in the microtask
+        window.event = window.event;
+      }
+
+      React.useEffect(() => {
+        window.addEventListener('popstate', onPopstate);
+        return () => window.removeEventListener('popstate', onPopstate);
+      }, []);
+
+      Scheduler.log(`render:${hasNavigated}/${syncState}`);
+
+      return null;
+    }
+    const root = ReactDOMClient.createRoot(container);
+    await act(async () => {
+      root.render(<App />);
+    });
+    assertLog(['render:false/false']);
+
+    // Trigger a transition update to be scheduled
+    React.startTransition(() => {
+      _setHasNavigated(true);
+    })
+
+    // The popState should not flush the transition update
+    const popStateEvent = new Event('popstate');
+    window.dispatchEvent(popStateEvent);
+    await waitFor(['render:false/true']);
+
+    root.unmount();
+  });
 });

packages/react-reconciler/src/ReactFiberLane.js

@@ -471,10 +471,6 @@ export function getLanesToRetrySynchronouslyOnError(
   return NoLanes;
 }
 
-export function getTransitionLanes(lanes: Lanes): Lanes {
-  return lanes & TransitionLanes;
-}
-
 export function includesSyncLane(lanes: Lanes): boolean {
   return (lanes & (SyncLane | SyncHydrationLane)) !== NoLanes;
 }

packages/react-reconciler/src/ReactFiberRootScheduler.js

@@ -19,11 +19,9 @@ import {
   getHighestPriorityLane,
   getNextLanes,
   includesSyncLane,
-  includesTransitionLane,
   markStarvedLanesAsExpired,
   markRootEntangled,
   mergeLanes,
-  getTransitionLanes,
 } from './ReactFiberLane';
 import {
   CommitContext,
@@ -80,6 +78,8 @@ let mightHavePendingSyncWork: boolean = false;
 
 let isFlushingWork: boolean = false;
 
+let currentEventTransitionLane: Lane = NoLanes;
+
 export function ensureRootIsScheduled(root: FiberRoot): void {
   // This function is called whenever a root receives an update. It does two
   // things 1) it ensures the root is in the root schedule, and 2) it ensures
@@ -237,12 +237,14 @@ function processRootScheduleInMicrotask() {
   let root = firstScheduledRoot;
   while (root !== null) {
     const next = root.next;
-    if (includesTransitionLane(root.pendingLanes) && shouldAttemptEagerTransition()) {
+  
+    if (currentEventTransitionLane !== NoLane && shouldAttemptEagerTransition()) {
       markRootEntangled(
         root,
-        mergeLanes(getTransitionLanes(root.pendingLanes), SyncLane),
+        mergeLanes(currentEventTransitionLane, SyncLane),
       );
     }
+
     const nextLanes = scheduleTaskForRootDuringMicrotask(root, currentTime);
     if (nextLanes === NoLane) {
       // This root has no more pending work. Remove it from the schedule. To
@@ -272,6 +274,8 @@ function processRootScheduleInMicrotask() {
     root = next;
   }
 
+  currentEventTransitionLane = NoLane;
+  
   // At the end of the microtask, flush any pending synchronous work. This has
   // to come at the end, because it does actual rendering work that might throw.
   flushSyncWorkOnAllRoots();
@@ -477,3 +481,11 @@ function scheduleImmediateTask(cb: () => mixed) {
     Scheduler_scheduleCallback(ImmediateSchedulerPriority, cb);
   }
 }
+
+export function getCurrentEventTransitionLane(): Lane {
+  return currentEventTransitionLane;
+}
+
+export function setCurrentEventTransitionLane(lane: Lane): void {
+  currentEventTransitionLane = lane;
+}

packages/react-reconciler/src/ReactFiberWorkLoop.js

@@ -280,6 +280,8 @@ import {
   flushSyncWorkOnAllRoots,
   flushSyncWorkOnLegacyRootsOnly,
   getContinuationForRoot,
+  getCurrentEventTransitionLane,
+  setCurrentEventTransitionLane,
 } from './ReactFiberRootScheduler';
 
 const ceil = Math.ceil;
@@ -589,7 +591,6 @@ let rootWithPassiveNestedUpdates: FiberRoot | null = null;
 // event times as simultaneous, even if the actual clock time has advanced
 // between the first and second call.
 let currentEventTime: number = NoTimestamp;
-let currentEventTransitionLane: Lanes = NoLanes;
 
 let isRunningInsertionEffect = false;
 
@@ -662,11 +663,11 @@ export function requestUpdateLane(fiber: Fiber): Lane {
     // The trick we use is to cache the first of each of these inputs within an
     // event. Then reset the cached values once we can be sure the event is
     // over. Our heuristic for that is whenever we enter a concurrent work loop.
-    if (currentEventTransitionLane === NoLane) {
+    if (getCurrentEventTransitionLane() === NoLane) {
       // All transitions within the same event are assigned the same lane.
-      currentEventTransitionLane = claimNextTransitionLane();
+      setCurrentEventTransitionLane(claimNextTransitionLane());
     }
-    return currentEventTransitionLane;
+    return getCurrentEventTransitionLane();
   }
 
   // Updates originating inside certain React methods, like flushSync, have
@@ -879,7 +880,6 @@ export function performConcurrentWorkOnRoot(
   // Since we know we're in a React event, we can clear the current
   // event time. The next update will compute a new event time.
   currentEventTime = NoTimestamp;
-  currentEventTransitionLane = NoLanes;
 
   if ((executionContext & (RenderContext | CommitContext)) !== NoContext) {
     throw new Error('Should not already be working.');