[Transition Tracing] Fix excess calls to the transition start callback (#24806)
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
Luna Ruan committed
Jun 28, 2022 at 21:17 UTC
d1432ba93e971b249d7055dbb3b91e34eb0d2100
4 files changed
+68
-5
packages/react-reconciler/src/ReactFiberLane.new.js
+2
-2
@@ -846,9 +846,9 @@ export function addTransitionToLanesMap(
846
const index = laneToIndex(lane);
847
let transitions = transitionLanesMap[index];
848
if (transitions === null) {
849
- transitions = [];
849
+ transitions = new Set();
850
}
851
- transitions.push(transition);
851
+ transitions.add(transition);
852
853
transitionLanesMap[index] = transitions;
854
}
packages/react-reconciler/src/ReactFiberLane.old.js
+2
-2
@@ -813,9 +813,9 @@ export function addTransitionToLanesMap(
813
const index = laneToIndex(lane);
814
let transitions = transitionLanesMap[index];
815
if (transitions === null) {
816
- transitions = [];
816
+ transitions = new Set();
817
}
818
- transitions.push(transition);
818
+ transitions.add(transition);
819
820
transitionLanesMap[index] = transitions;
821
}
packages/react-reconciler/src/ReactInternalTypes.js
+1
-1
@@ -328,7 +328,7 @@ export type TransitionTracingCallbacks = {
328
// The following fields are only used in transition tracing in Profile builds
329
type TransitionTracingOnlyFiberRootProperties = {|
330
transitionCallbacks: null | TransitionTracingCallbacks,
331
- transitionLanes: Array<Array<Transition> | null>,
331
+ transitionLanes: Array<Set<Transition> | null>,
332
// Transitions on the root can be represented as a bunch of tracing markers.
333
// Each entangled group of transitions can be treated as a tracing marker.
334
// It will have a set of pending suspense boundaries. These transitions
packages/react-reconciler/src/__tests__/ReactTransitionTracing-test.js
+63
@@ -212,6 +212,69 @@ describe('ReactInteractionTracing', () => {
212
});
213
});
214
215
+ // @gate enableTransitionTracing
216
+ it('multiple updates in transition callback should only result in one transitionStart/transitionComplete call', async () => {
217
+ const transitionCallbacks = {
218
+ onTransitionStart: (name, startTime) => {
219
+ Scheduler.unstable_yieldValue(
220
+ `onTransitionStart(${name}, ${startTime})`,
221
+ );
222
+ },
223
+ onTransitionComplete: (name, startTime, endTime) => {
224
+ Scheduler.unstable_yieldValue(
225
+ `onTransitionComplete(${name}, ${startTime}, ${endTime})`,
226
+ );
227
+ },
228
+ };
229
+
230
+ let navigateToPageTwo;
231
+ let setText;
232
+ function App() {
233
+ const [navigate, setNavigate] = useState(false);
234
+ const [text, _setText] = useState('hide');
235
+ navigateToPageTwo = () => setNavigate(true);
236
+ setText = () => _setText('show');
237
+
238
+ return (
239
+ <div>
240
+ {navigate ? (
241
+ <Text text={`Page Two: ${text}`} />
242
+ ) : (
243
+ <Text text={`Page One: ${text}`} />
244
+ )}
245
+ </div>
246
+ );
247
+ }
248
+
249
+ const root = ReactNoop.createRoot({transitionCallbacks});
250
+ await act(async () => {
251
+ root.render(<App />);
252
+ ReactNoop.expire(1000);
253
+ await advanceTimers(1000);
254
+
255
+ expect(Scheduler).toFlushAndYield(['Page One: hide']);
256
+
257
+ await act(async () => {
258
+ startTransition(
259
+ () => {
260
+ navigateToPageTwo();
261
+ setText();
262
+ },
263
+ {name: 'page transition'},
264
+ );
265
+
266
+ ReactNoop.expire(1000);
267
+ await advanceTimers(1000);
268
+
269
+ expect(Scheduler).toFlushAndYield([
270
+ 'Page Two: show',
271
+ 'onTransitionStart(page transition, 1000)',
272
+ 'onTransitionComplete(page transition, 1000, 2000)',
273
+ ]);
274
+ });
275
+ });
276
+ });
277
+
278
// @gate enableTransitionTracing
279
it('should correctly trace interactions for async roots', async () => {
280
const transitionCallbacks = {