[Transition Tracing] Fix excess calls to the transition start callback (#24806)

lunaruan · web-flow · commit d1432ba93e97 · 2022-06-28T21:17:14.000-04:00
This PR fixes a bug where we would add a transition to the lanes map every time an update occurs. However, we didn't factor in that there might be multiple updates in a transition, which would cause the transition to be added multiple times to the transitionLanes map.

This changes the transitionLanes object from an Array of Arrays to an Array of Sets so that we only add a transition if it hasn't been added before, avoiding duplicates
diff --git a/packages/react-reconciler/src/ReactFiberLane.new.js b/packages/react-reconciler/src/ReactFiberLane.new.js
@@ -846,9 +846,9 @@ export function addTransitionToLanesMap(
     const index = laneToIndex(lane);
     let transitions = transitionLanesMap[index];
     if (transitions === null) {
-      transitions = [];
+      transitions = new Set();
     }
-    transitions.push(transition);
+    transitions.add(transition);
 
     transitionLanesMap[index] = transitions;
   }
diff --git a/packages/react-reconciler/src/ReactFiberLane.old.js b/packages/react-reconciler/src/ReactFiberLane.old.js
@@ -813,9 +813,9 @@ export function addTransitionToLanesMap(
     const index = laneToIndex(lane);
     let transitions = transitionLanesMap[index];
     if (transitions === null) {
-      transitions = [];
+      transitions = new Set();
     }
-    transitions.push(transition);
+    transitions.add(transition);
 
     transitionLanesMap[index] = transitions;
   }
diff --git a/packages/react-reconciler/src/ReactInternalTypes.js b/packages/react-reconciler/src/ReactInternalTypes.js
@@ -328,7 +328,7 @@ export type TransitionTracingCallbacks = {
 // The following fields are only used in transition tracing in Profile builds
 type TransitionTracingOnlyFiberRootProperties = {|
   transitionCallbacks: null | TransitionTracingCallbacks,
-  transitionLanes: Array<Array<Transition> | null>,
+  transitionLanes: Array<Set<Transition> | null>,
   // Transitions on the root can be represented as a bunch of tracing markers.
   // Each entangled group of transitions can be treated as a tracing marker.
   // It will have a set of pending suspense boundaries. These transitions
diff --git a/packages/react-reconciler/src/__tests__/ReactTransitionTracing-test.js b/packages/react-reconciler/src/__tests__/ReactTransitionTracing-test.js
@@ -212,6 +212,69 @@ describe('ReactInteractionTracing', () => {
     });
   });
 
+  // @gate enableTransitionTracing
+  it('multiple updates in transition callback should only result in one transitionStart/transitionComplete call', async () => {
+    const transitionCallbacks = {
+      onTransitionStart: (name, startTime) => {
+        Scheduler.unstable_yieldValue(
+          `onTransitionStart(${name}, ${startTime})`,
+        );
+      },
+      onTransitionComplete: (name, startTime, endTime) => {
+        Scheduler.unstable_yieldValue(
+          `onTransitionComplete(${name}, ${startTime}, ${endTime})`,
+        );
+      },
+    };
+
+    let navigateToPageTwo;
+    let setText;
+    function App() {
+      const [navigate, setNavigate] = useState(false);
+      const [text, _setText] = useState('hide');
+      navigateToPageTwo = () => setNavigate(true);
+      setText = () => _setText('show');
+
+      return (
+        <div>
+          {navigate ? (
+            <Text text={`Page Two: ${text}`} />
+          ) : (
+            <Text text={`Page One: ${text}`} />
+          )}
+        </div>
+      );
+    }
+
+    const root = ReactNoop.createRoot({transitionCallbacks});
+    await act(async () => {
+      root.render(<App />);
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+
+      expect(Scheduler).toFlushAndYield(['Page One: hide']);
+
+      await act(async () => {
+        startTransition(
+          () => {
+            navigateToPageTwo();
+            setText();
+          },
+          {name: 'page transition'},
+        );
+
+        ReactNoop.expire(1000);
+        await advanceTimers(1000);
+
+        expect(Scheduler).toFlushAndYield([
+          'Page Two: show',
+          'onTransitionStart(page transition, 1000)',
+          'onTransitionComplete(page transition, 1000, 2000)',
+        ]);
+      });
+    });
+  });
+
   // @gate enableTransitionTracing
   it('should correctly trace interactions for async roots', async () => {
     const transitionCallbacks = {
