@samitouri / QOS-React-2 / commits / e61fd91f5c

Revert "[Transition Tracing] Refactor Transition Tracing Root Code (#24766)" (#24829)

This reverts commit 401296310fbc6a9e769936eda6a6d0269e9c84d0 because it's failing on main, likely due to conflict with something that landed before the PR was merged. Need to rebase and fix.

Andrew Clark committed Jun 30, 2022 at 11:48 UTC e61fd91f5c523adb63a3b97375ac95ac657dc07f

14 files changed +179 -309

packages/react-reconciler/src/ReactFiberBeginWork.new.js

+9 -28

@@ -27,7 +27,6 @@ import type {

27 OffscreenProps,

28 OffscreenState,

29 OffscreenQueue,

30 - OffscreenInstance,

30 } from './ReactFiberOffscreenComponent';

31 import type {

32 Cache,

@@ -263,9 +262,8 @@ import {

262 getPendingTransitions,

263 } from './ReactFiberTransition.new';

264 import {

266 - getMarkerInstances,

267 - pushMarkerInstance,

268 - pushRootMarkerInstance,

265 + getTracingMarkers,

266 + pushTracingMarker,

267 } from './ReactFiberTracingMarkerComponent.new';

268

269 const ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;

@@ -781,10 +779,7 @@ function updateOffscreenComponent(

779 if (enableTransitionTracing) {

780 // We have now gone from hidden to visible, so any transitions should

781 // be added to the stack to get added to any Offscreen/suspense children

784 - const instance: OffscreenInstance | null = workInProgress.stateNode;

785 - if (instance !== null && instance.transitions != null) {

786 - transitions = Array.from(instance.transitions);

787 - }

782 + transitions = workInProgress.stateNode.transitions;

783 }

784

785 pushTransition(workInProgress, prevCachePool, transitions);

@@ -914,10 +909,7 @@ function updateTracingMarkerComponent(

909 }

910 }

911

917 - const instance: TracingMarkerInstance | null = workInProgress.stateNode;

918 - if (instance !== null) {

919 - pushMarkerInstance(workInProgress, instance);

920 - }

912 + pushTracingMarker(workInProgress);

913 const nextChildren = workInProgress.pendingProps.children;

914 reconcileChildren(current, workInProgress, nextChildren, renderLanes);

915 return workInProgress.child;

@@ -1321,10 +1313,6 @@ function updateHostRoot(current, workInProgress, renderLanes) {

1313 const root: FiberRoot = workInProgress.stateNode;

1314 pushRootTransition(workInProgress, root, renderLanes);

1315

1324 - if (enableTransitionTracing) {

1325 - pushRootMarkerInstance(workInProgress);

1326 - }

1327 -

1316 if (enableCache) {

1317 const nextCache: Cache = nextState.cache;

1318 pushCacheProvider(workInProgress, nextCache);

@@ -2110,10 +2098,10 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {

2098 const currentTransitions = getPendingTransitions();

2099 if (currentTransitions !== null) {

2100 // If there are no transitions, we don't need to keep track of tracing markers

2113 - const parentMarkerInstances = getMarkerInstances();

2101 + const currentTracingMarkers = getTracingMarkers();

2102 const primaryChildUpdateQueue: OffscreenQueue = {

2103 transitions: currentTransitions,

2116 - markerInstances: parentMarkerInstances,

2104 + tracingMarkers: currentTracingMarkers,

2105 };

2106 primaryChildFragment.updateQueue = primaryChildUpdateQueue;

2107 }

@@ -2200,10 +2188,10 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {

2188 if (enableTransitionTracing) {

2189 const currentTransitions = getPendingTransitions();

2190 if (currentTransitions !== null) {

2203 - const parentMarkerInstances = getMarkerInstances();

2191 + const currentTracingMarkers = getTracingMarkers();

2192 const primaryChildUpdateQueue: OffscreenQueue = {

2193 transitions: currentTransitions,

2206 - markerInstances: parentMarkerInstances,

2194 + tracingMarkers: currentTracingMarkers,

2195 };

2196 primaryChildFragment.updateQueue = primaryChildUpdateQueue;

2197 }

@@ -3521,10 +3509,6 @@ function attemptEarlyBailoutIfNoScheduledUpdate(

3509 const root: FiberRoot = workInProgress.stateNode;

3510 pushRootTransition(workInProgress, root, renderLanes);

3511

3524 - if (enableTransitionTracing) {

3525 - pushRootMarkerInstance(workInProgress);

3526 - }

3527 -

3512 if (enableCache) {

3513 const cache: Cache = current.memoizedState.cache;

3514 pushCacheProvider(workInProgress, cache);

@@ -3710,10 +3694,7 @@ function attemptEarlyBailoutIfNoScheduledUpdate(

3694 }

3695 case TracingMarkerComponent: {

3696 if (enableTransitionTracing) {

3713 - const instance: TracingMarkerInstance | null = workInProgress.stateNode;

3714 - if (instance !== null) {

3715 - pushMarkerInstance(workInProgress, instance);

3716 - }

3697 + pushTracingMarker(workInProgress);

3698 }

3699 }

3700 }

packages/react-reconciler/src/ReactFiberBeginWork.old.js

+9 -28

@@ -27,7 +27,6 @@ import type {

27 OffscreenProps,

28 OffscreenState,

29 OffscreenQueue,

30 - OffscreenInstance,

30 } from './ReactFiberOffscreenComponent';

31 import type {

32 Cache,

@@ -260,9 +259,8 @@ import {

259 getPendingTransitions,

260 } from './ReactFiberTransition.old';

261 import {

263 - getMarkerInstances,

264 - pushMarkerInstance,

265 - pushRootMarkerInstance,

262 + getTracingMarkers,

263 + pushTracingMarker,

264 } from './ReactFiberTracingMarkerComponent.old';

265

266 const ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;

@@ -786,10 +784,7 @@ function updateOffscreenComponent(

784 if (enableTransitionTracing) {

785 // We have now gone from hidden to visible, so any transitions should

786 // be added to the stack to get added to any Offscreen/suspense children

789 - const instance: OffscreenInstance | null = workInProgress.stateNode;

790 - if (instance !== null && instance.transitions != null) {

791 - transitions = Array.from(instance.transitions);

792 - }

787 + transitions = workInProgress.stateNode.transitions;

788 }

789

790 pushTransition(workInProgress, prevCachePool, transitions);

@@ -914,10 +909,7 @@ function updateTracingMarkerComponent(

909 }

910 }

911

917 - const instance: TracingMarkerInstance | null = workInProgress.stateNode;

918 - if (instance !== null) {

919 - pushMarkerInstance(workInProgress, instance);

920 - }

912 + pushTracingMarker(workInProgress);

913 const nextChildren = workInProgress.pendingProps.children;

914 reconcileChildren(current, workInProgress, nextChildren, renderLanes);

915 return workInProgress.child;

@@ -1321,10 +1313,6 @@ function updateHostRoot(current, workInProgress, renderLanes) {

1313 const root: FiberRoot = workInProgress.stateNode;

1314 pushRootTransition(workInProgress, root, renderLanes);

1315

1324 - if (enableTransitionTracing) {

1325 - pushRootMarkerInstance(workInProgress);

1326 - }

1327 -

1316 if (enableCache) {

1317 const nextCache: Cache = nextState.cache;

1318 pushCacheProvider(workInProgress, nextCache);

@@ -2126,10 +2114,10 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {

2114 const currentTransitions = getPendingTransitions();

2115 if (currentTransitions !== null) {

2116 // If there are no transitions, we don't need to keep track of tracing markers

2129 - const parentMarkerInstances = getMarkerInstances();

2117 + const currentTracingMarkers = getTracingMarkers();

2118 const primaryChildUpdateQueue: OffscreenQueue = {

2119 transitions: currentTransitions,

2132 - markerInstances: parentMarkerInstances,

2120 + tracingMarkers: currentTracingMarkers,

2121 };

2122 primaryChildFragment.updateQueue = primaryChildUpdateQueue;

2123 }

@@ -2212,10 +2200,10 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {

2200 if (enableTransitionTracing) {

2201 const currentTransitions = getPendingTransitions();

2202 if (currentTransitions !== null) {

2215 - const parentMarkerInstances = getMarkerInstances();

2203 + const currentTracingMarkers = getTracingMarkers();

2204 const primaryChildUpdateQueue: OffscreenQueue = {

2205 transitions: currentTransitions,

2218 - markerInstances: parentMarkerInstances,

2206 + tracingMarkers: currentTracingMarkers,

2207 };

2208 primaryChildFragment.updateQueue = primaryChildUpdateQueue;

2209 }

@@ -3522,10 +3510,6 @@ function attemptEarlyBailoutIfNoScheduledUpdate(

3510 const root: FiberRoot = workInProgress.stateNode;

3511 pushRootTransition(workInProgress, root, renderLanes);

3512

3525 - if (enableTransitionTracing) {

3526 - pushRootMarkerInstance(workInProgress);

3527 - }

3528 -

3513 if (enableCache) {

3514 const cache: Cache = current.memoizedState.cache;

3515 pushCacheProvider(workInProgress, cache);

@@ -3718,10 +3702,7 @@ function attemptEarlyBailoutIfNoScheduledUpdate(

3702 }

3703 case TracingMarkerComponent: {

3704 if (enableTransitionTracing) {

3721 - const instance: TracingMarkerInstance | null = workInProgress.stateNode;

3722 - if (instance !== null) {

3723 - pushMarkerInstance(workInProgress, instance);

3724 - }

3705 + pushTracingMarker(workInProgress);

3706 }

3707 }

3708 }

packages/react-reconciler/src/ReactFiberCommitWork.new.js

+63 -30

@@ -2811,35 +2811,47 @@ function commitPassiveMountOnFiber(

2811 // Get the transitions that were initiatized during the render

2812 // and add a start transition callback for each of them

2813 const root = finishedWork.stateNode;

2814 - const incompleteTransitions = root.incompleteTransitions;

2814 + let incompleteTransitions = root.incompleteTransitions;

2815 // Initial render

2816 if (committedTransitions !== null) {

2817 + if (incompleteTransitions === null) {

2818 + root.incompleteTransitions = incompleteTransitions = new Map();

2819 + }

2820 +

2821 committedTransitions.forEach(transition => {

2822 addTransitionStartCallbackToPendingTransition({

2823 transitionName: transition.name,

2824 startTime: transition.startTime,

2825 });

2826 +

2827 + if (!incompleteTransitions.has(transition)) {

2828 + incompleteTransitions.set(transition, null);

2829 + }

2830 });

2831

2832 clearTransitionsForLanes(finishedRoot, committedLanes);

2833 }

2834

2827 - incompleteTransitions.forEach(

2828 - ({pendingSuspenseBoundaries}, transition) => {

2829 - if (

2830 - pendingSuspenseBoundaries === null ||

2831 - pendingSuspenseBoundaries.size === 0

2832 - ) {

2835 + if (incompleteTransitions !== null) {

2836 + incompleteTransitions.forEach((pendingBoundaries, transition) => {

2837 + if (pendingBoundaries === null || pendingBoundaries.size === 0) {

2838 addTransitionCompleteCallbackToPendingTransition({

2839 transitionName: transition.name,

2840 startTime: transition.startTime,

2841 });

2842 incompleteTransitions.delete(transition);

2843 }

2839 - },

2840 - );

2844 + });

2845 + }

2846

2842 - clearTransitionsForLanes(finishedRoot, committedLanes);

2847 + // If there are no more pending suspense boundaries we

2848 + // clear the transitions because they are all complete.

2849 + if (

2850 + incompleteTransitions === null ||

2851 + incompleteTransitions.size === 0

2852 + ) {

2853 + root.incompleteTransitions = null;

2854 + }

2855 }

2856 break;

2857 }

@@ -2884,6 +2896,14 @@ function commitPassiveMountOnFiber(

2896 if (isFallback) {

2897 const transitions = queue.transitions;

2898 let prevTransitions = instance.transitions;

2899 + let rootIncompleteTransitions = finishedRoot.incompleteTransitions;

2900 +

2901 + // We lazily instantiate transition tracing relevant maps

2902 + // and sets in the commit phase as we need to use them. We only

2903 + // instantiate them in the fallback phase on an as needed basis

2904 + if (rootIncompleteTransitions === null) {

2905 + finishedRoot.incompleteTransitions = rootIncompleteTransitions = new Map();

2906 + }

2907 if (instance.pendingMarkers === null) {

2908 instance.pendingMarkers = new Set();

2909 }

@@ -2891,43 +2911,56 @@ function commitPassiveMountOnFiber(

2911 instance.transitions = prevTransitions = new Set();

2912 }

2913

2914 + // TODO(luna): Combine the root code with the tracing marker code

2915 if (transitions !== null) {

2916 transitions.forEach(transition => {

2917 // Add all the transitions saved in the update queue during

2918 // the render phase (ie the transitions associated with this boundary)

2919 // into the transitions set.

2920 prevTransitions.add(transition);

2900 - });

2901 - }

2921

2903 - const markerInstances = queue.markerInstances;

2904 - if (markerInstances !== null) {

2905 - markerInstances.forEach(markerInstance => {

2906 - if (markerInstance.pendingSuspenseBoundaries === null) {

2907 - markerInstance.pendingSuspenseBoundaries = new Map();

2922 + // Add the root transition's pending suspense boundary set to

2923 + // the queue's marker set. We will iterate through the marker

2924 + // set when we toggle state on the suspense boundary and

2925 + // add or remove the pending suspense boundaries as needed.

2926 + if (rootIncompleteTransitions !== null) {

2927 + if (!rootIncompleteTransitions.has(transition)) {

2928 + rootIncompleteTransitions.set(transition, new Map());

2929 + }

2930 + instance.pendingMarkers.add(

2931 + rootIncompleteTransitions.get(transition),

2932 + );

2933 }

2934 + });

2935 + }

2936

2910 - const markerTransitions = markerInstance.transitions;

2937 + const tracingMarkers = queue.tracingMarkers;

2938 + if (tracingMarkers !== null) {

2939 + tracingMarkers.forEach(marker => {

2940 + const markerInstance = marker.stateNode;

2941 // There should only be a few tracing marker transitions because

2942 // they should be only associated with the transition that

2943 // caused them

2914 - if (markerTransitions !== null) {

2915 - markerTransitions.forEach(transition => {

2916 - if (instance.transitions.has(transition)) {

2917 - instance.pendingMarkers.add(

2918 - markerInstance.pendingSuspenseBoundaries,

2919 - );

2920 - }

2921 - });

2922 - }

2944 + markerInstance.transitions.forEach(transition => {

2945 + if (instance.transitions.has(transition)) {

2946 + instance.pendingMarkers.add(

2947 + markerInstance.pendingSuspenseBoundaries,

2948 + );

2949 + }

2950 + });

2951 });

2952 }

2953 }

2954

2927 - finishedWork.updateQueue = null;

2928 - }

2955 + commitTransitionProgress(finishedWork);

2956

2930 - commitTransitionProgress(finishedWork);

2957 + if (

2958 + instance.pendingMarkers === null ||

2959 + instance.pendingMarkers.size === 0

2960 + ) {

2961 + finishedWork.updateQueue = null;

2962 + }

2963 + }

2964 }

2965

2966 break;

packages/react-reconciler/src/ReactFiberCommitWork.old.js

+63 -30

@@ -2811,35 +2811,47 @@ function commitPassiveMountOnFiber(

2811 // Get the transitions that were initiatized during the render

2812 // and add a start transition callback for each of them

2813 const root = finishedWork.stateNode;

2814 - const incompleteTransitions = root.incompleteTransitions;

2814 + let incompleteTransitions = root.incompleteTransitions;

2815 // Initial render

2816 if (committedTransitions !== null) {

2817 + if (incompleteTransitions === null) {

2818 + root.incompleteTransitions = incompleteTransitions = new Map();

2819 + }

2820 +

2821 committedTransitions.forEach(transition => {

2822 addTransitionStartCallbackToPendingTransition({

2823 transitionName: transition.name,

2824 startTime: transition.startTime,

2825 });

2826 +

2827 + if (!incompleteTransitions.has(transition)) {

2828 + incompleteTransitions.set(transition, null);

2829 + }

2830 });

2831

2832 clearTransitionsForLanes(finishedRoot, committedLanes);

2833 }

2834

2827 - incompleteTransitions.forEach(

2828 - ({pendingSuspenseBoundaries}, transition) => {

2829 - if (

2830 - pendingSuspenseBoundaries === null ||

2831 - pendingSuspenseBoundaries.size === 0

2832 - ) {

2835 + if (incompleteTransitions !== null) {

2836 + incompleteTransitions.forEach((pendingBoundaries, transition) => {

2837 + if (pendingBoundaries === null || pendingBoundaries.size === 0) {

2838 addTransitionCompleteCallbackToPendingTransition({

2839 transitionName: transition.name,

2840 startTime: transition.startTime,

2841 });

2842 incompleteTransitions.delete(transition);

2843 }

2839 - },

2840 - );

2844 + });

2845 + }

2846

2842 - clearTransitionsForLanes(finishedRoot, committedLanes);

2847 + // If there are no more pending suspense boundaries we

2848 + // clear the transitions because they are all complete.

2849 + if (

2850 + incompleteTransitions === null ||

2851 + incompleteTransitions.size === 0

2852 + ) {

2853 + root.incompleteTransitions = null;

2854 + }

2855 }

2856 break;

2857 }

@@ -2884,6 +2896,14 @@ function commitPassiveMountOnFiber(

2896 if (isFallback) {

2897 const transitions = queue.transitions;

2898 let prevTransitions = instance.transitions;

2899 + let rootIncompleteTransitions = finishedRoot.incompleteTransitions;

2900 +

2901 + // We lazily instantiate transition tracing relevant maps

2902 + // and sets in the commit phase as we need to use them. We only

2903 + // instantiate them in the fallback phase on an as needed basis

2904 + if (rootIncompleteTransitions === null) {

2905 + finishedRoot.incompleteTransitions = rootIncompleteTransitions = new Map();

2906 + }

2907 if (instance.pendingMarkers === null) {

2908 instance.pendingMarkers = new Set();

2909 }

@@ -2891,43 +2911,56 @@ function commitPassiveMountOnFiber(

2911 instance.transitions = prevTransitions = new Set();

2912 }

2913

2914 + // TODO(luna): Combine the root code with the tracing marker code

2915 if (transitions !== null) {

2916 transitions.forEach(transition => {

2917 // Add all the transitions saved in the update queue during

2918 // the render phase (ie the transitions associated with this boundary)

2919 // into the transitions set.

2920 prevTransitions.add(transition);

2900 - });

2901 - }

2921

2903 - const markerInstances = queue.markerInstances;

2904 - if (markerInstances !== null) {

2905 - markerInstances.forEach(markerInstance => {

2906 - if (markerInstance.pendingSuspenseBoundaries === null) {

2907 - markerInstance.pendingSuspenseBoundaries = new Map();

2922 + // Add the root transition's pending suspense boundary set to

2923 + // the queue's marker set. We will iterate through the marker

2924 + // set when we toggle state on the suspense boundary and

2925 + // add or remove the pending suspense boundaries as needed.

2926 + if (rootIncompleteTransitions !== null) {

2927 + if (!rootIncompleteTransitions.has(transition)) {

2928 + rootIncompleteTransitions.set(transition, new Map());

2929 + }

2930 + instance.pendingMarkers.add(

2931 + rootIncompleteTransitions.get(transition),

2932 + );

2933 }

2934 + });

2935 + }

2936

2910 - const markerTransitions = markerInstance.transitions;

2937 + const tracingMarkers = queue.tracingMarkers;

2938 + if (tracingMarkers !== null) {

2939 + tracingMarkers.forEach(marker => {

2940 + const markerInstance = marker.stateNode;

2941 // There should only be a few tracing marker transitions because

2942 // they should be only associated with the transition that

2943 // caused them

2914 - if (markerTransitions !== null) {

2915 - markerTransitions.forEach(transition => {

2916 - if (instance.transitions.has(transition)) {

2917 - instance.pendingMarkers.add(

2918 - markerInstance.pendingSuspenseBoundaries,

2919 - );

2920 - }

2921 - });

2922 - }

2944 + markerInstance.transitions.forEach(transition => {

2945 + if (instance.transitions.has(transition)) {

2946 + instance.pendingMarkers.add(

2947 + markerInstance.pendingSuspenseBoundaries,

2948 + );

2949 + }

2950 + });

2951 });

2952 }

2953 }

2954

2927 - finishedWork.updateQueue = null;

2928 - }

2955 + commitTransitionProgress(finishedWork);

2956

2930 - commitTransitionProgress(finishedWork);

2957 + if (

2958 + instance.pendingMarkers === null ||

2959 + instance.pendingMarkers.size === 0

2960 + ) {

2961 + finishedWork.updateQueue = null;

2962 + }

2963 + }

2964 }

2965

2966 break;

packages/react-reconciler/src/ReactFiberCompleteWork.new.js

+2 -14

@@ -28,7 +28,6 @@ import type {

28 SuspenseListRenderState,

29 } from './ReactFiberSuspenseComponent.new';

30 import type {OffscreenState} from './ReactFiberOffscreenComponent';

31 -import type {TracingMarkerInstance} from './ReactFiberTracingMarkerComponent.new';

31 import type {Cache} from './ReactFiberCacheComponent.new';

32 import {

33 enableSuspenseAvoidThisFallback,

@@ -165,10 +164,7 @@ import {transferActualDuration} from './ReactProfilerTimer.new';

164 import {popCacheProvider} from './ReactFiberCacheComponent.new';

165 import {popTreeContext} from './ReactFiberTreeContext.new';

166 import {popRootTransition, popTransition} from './ReactFiberTransition.new';

168 -import {

169 - popMarkerInstance,

170 - popRootMarkerInstance,

171 -} from './ReactFiberTracingMarkerComponent.new';

167 +import {popTracingMarker} from './ReactFiberTracingMarkerComponent.new';

168

169 function markUpdate(workInProgress: Fiber) {

170 // Tag the fiber with an update effect. This turns a Placement into

@@ -904,11 +900,6 @@ function completeWork(

900 }

901 popCacheProvider(workInProgress, cache);

902 }

907 -

908 - if (enableTransitionTracing) {

909 - popRootMarkerInstance(workInProgress);

910 - }

911 -

903 popRootTransition(workInProgress, fiberRoot, renderLanes);

904 popHostContainer(workInProgress);

905 popTopLevelLegacyContextObject(workInProgress);

@@ -1588,10 +1579,7 @@ function completeWork(

1579 }

1580 case TracingMarkerComponent: {

1581 if (enableTransitionTracing) {

1591 - const instance: TracingMarkerInstance | null = workInProgress.stateNode;

1592 - if (instance !== null) {

1593 - popMarkerInstance(workInProgress);

1594 - }

1582 + popTracingMarker(workInProgress);

1583 bubbleProperties(workInProgress);

1584

1585 if (

packages/react-reconciler/src/ReactFiberCompleteWork.old.js

+2 -14

@@ -29,7 +29,6 @@ import type {

29 } from './ReactFiberSuspenseComponent.old';

30 import type {SuspenseContext} from './ReactFiberSuspenseContext.old';

31 import type {OffscreenState} from './ReactFiberOffscreenComponent';

32 -import type {TracingMarkerInstance} from './ReactFiberTracingMarkerComponent.old';

32 import type {Cache} from './ReactFiberCacheComponent.old';

33 import {

34 enableSuspenseAvoidThisFallback,

@@ -165,10 +164,7 @@ import {transferActualDuration} from './ReactProfilerTimer.old';

164 import {popCacheProvider} from './ReactFiberCacheComponent.old';

165 import {popTreeContext} from './ReactFiberTreeContext.old';

166 import {popRootTransition, popTransition} from './ReactFiberTransition.old';

168 -import {

169 - popMarkerInstance,

170 - popRootMarkerInstance,

171 -} from './ReactFiberTracingMarkerComponent.old';

167 +import {popTracingMarker} from './ReactFiberTracingMarkerComponent.old';

168

169 function markUpdate(workInProgress: Fiber) {

170 // Tag the fiber with an update effect. This turns a Placement into

@@ -904,11 +900,6 @@ function completeWork(

900 }

901 popCacheProvider(workInProgress, cache);

902 }

907 -

908 - if (enableTransitionTracing) {

909 - popRootMarkerInstance(workInProgress);

910 - }

911 -

903 popRootTransition(workInProgress, fiberRoot, renderLanes);

904 popHostContainer(workInProgress);

905 popTopLevelLegacyContextObject(workInProgress);

@@ -1588,10 +1579,7 @@ function completeWork(

1579 }

1580 case TracingMarkerComponent: {

1581 if (enableTransitionTracing) {

1591 - const instance: TracingMarkerInstance | null = workInProgress.stateNode;

1592 - if (instance !== null) {

1593 - popMarkerInstance(workInProgress);

1594 - }

1582 + popTracingMarker(workInProgress);

1583 bubbleProperties(workInProgress);

1584

1585 if (

packages/react-reconciler/src/ReactFiberOffscreenComponent.js

+2 -2

@@ -8,12 +8,12 @@

8 */

10 import type {ReactNodeList, OffscreenMode} from 'shared/ReactTypes';

11 +import type {Fiber} from './ReactInternalTypes';

12 import type {Lanes} from './ReactFiberLane.old';

13 import type {SpawnedCachePool} from './ReactFiberCacheComponent.new';

14 import type {

15 Transition,

16 PendingSuspenseBoundaries,

16 - TracingMarkerInstance,

17 } from './ReactFiberTracingMarkerComponent.new';

19 export type OffscreenProps = {|

@@ -39,7 +39,7 @@ export type OffscreenState = {|

40 export type OffscreenQueue = {|

41 transitions: Array<Transition> | null,

42 - markerInstances: Array<TracingMarkerInstance> | null,

42 + tracingMarkers: Array<Fiber> | null,

43 |} | null;

45 export type OffscreenInstance = {|

packages/react-reconciler/src/ReactFiberRoot.new.js

+1 -1

@@ -92,13 +92,13 @@ function FiberRootNode(

92 this.hydrationCallbacks = null;

93 }

95 - this.incompleteTransitions = new Map();

95 if (enableTransitionTracing) {

96 this.transitionCallbacks = null;

97 const transitionLanesMap = (this.transitionLanes = []);

98 for (let i = 0; i < TotalLanes; i++) {

99 transitionLanesMap.push(null);

100 }

101 + this.incompleteTransitions = null;

102 }

103

104 if (enableProfilerTimer && enableProfilerCommitHooks) {

packages/react-reconciler/src/ReactFiberRoot.old.js

+1 -1

@@ -92,13 +92,13 @@ function FiberRootNode(

92 this.hydrationCallbacks = null;

93 }

95 - this.incompleteTransitions = new Map();

95 if (enableTransitionTracing) {

96 this.transitionCallbacks = null;

97 const transitionLanesMap = (this.transitionLanes = []);

98 for (let i = 0; i < TotalLanes; i++) {

99 transitionLanesMap.push(null);

100 }

101 + this.incompleteTransitions = null;

102 }

103

104 if (enableProfilerTimer && enableProfilerCommitHooks) {

packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js

+10 -57

@@ -13,7 +13,6 @@ import type {StackCursor} from './ReactFiberStack.new';

14 import {enableTransitionTracing} from 'shared/ReactFeatureFlags';

15 import {createCursor, push, pop} from './ReactFiberStack.new';

16 -import {getWorkInProgressTransitions} from './ReactFiberWorkLoop.new';

17 export type SuspenseInfo = {name: string | null};

@@ -101,77 +100,31 @@ export function processTransitionCallbacks(

100 // tracing marker can be logged as complete

101 // This code lives separate from the ReactFiberTransition code because

102 // we push and pop on the tracing marker, not the suspense boundary

104 -const markerInstanceStack: StackCursor<Array<TracingMarkerInstance> | null> = createCursor(

105 - null,

106 -);

103 +const tracingMarkerStack: StackCursor<Array<Fiber> | null> = createCursor(null);

104

108 -export function pushRootMarkerInstance(workInProgress: Fiber): void {

105 +export function pushTracingMarker(workInProgress: Fiber): void {

106 if (enableTransitionTracing) {

110 - // On the root, every transition gets mapped to it's own map of

111 - // suspense boundaries. The transition is marked as complete when

112 - // the suspense boundaries map is empty. We do this because every

113 - // transition completes at different times and depends on different

114 - // suspense boundaries to complete. We store all the transitions

115 - // along with its map of suspense boundaries in the root incomplete

116 - // transitions map. Each entry in this map functions like a tracing

117 - // marker does, so we can push it onto the marker instance stack

118 - const transitions = getWorkInProgressTransitions();

119 - const root = workInProgress.stateNode;

120 -

121 - if (transitions !== null) {

122 - transitions.forEach(transition => {

123 - if (!root.incompleteTransitions.has(transition)) {

124 - root.incompleteTransitions.set(transition, {

125 - transitions: new Set([transition]),

126 - pendingSuspenseBoundaries: null,

127 - });

128 - }

129 - });

130 - }

131 -

132 - const markerInstances = [];

133 - // For ever transition on the suspense boundary, we push the transition

134 - // along with its map of pending suspense boundaries onto the marker

135 - // instance stack.

136 - root.incompleteTransitions.forEach(markerInstance => {

137 - markerInstances.push(markerInstance);

138 - });

139 - push(markerInstanceStack, markerInstances, workInProgress);

140 - }

141 -}

142 -

143 -export function popRootMarkerInstance(workInProgress: Fiber) {

144 - if (enableTransitionTracing) {

145 - pop(markerInstanceStack, workInProgress);

146 - }

147 -}

148 -

149 -export function pushMarkerInstance(

150 - workInProgress: Fiber,

151 - markerInstance: TracingMarkerInstance,

152 -): void {

153 - if (enableTransitionTracing) {

154 - if (markerInstanceStack.current === null) {

155 - push(markerInstanceStack, [markerInstance], workInProgress);

107 + if (tracingMarkerStack.current === null) {

108 + push(tracingMarkerStack, [workInProgress], workInProgress);

109 } else {

110 push(

158 - markerInstanceStack,

159 - markerInstanceStack.current.concat(markerInstance),

111 + tracingMarkerStack,

112 + tracingMarkerStack.current.concat(workInProgress),

113 workInProgress,

114 );

115 }

116 }

117 }

118

166 -export function popMarkerInstance(workInProgress: Fiber): void {

119 +export function popTracingMarker(workInProgress: Fiber): void {

120 if (enableTransitionTracing) {

168 - pop(markerInstanceStack, workInProgress);

121 + pop(tracingMarkerStack, workInProgress);

122 }

123 }

124

172 -export function getMarkerInstances(): Array<TracingMarkerInstance> | null {

125 +export function getTracingMarkers(): Array<Fiber> | null {

126 if (enableTransitionTracing) {

174 - return markerInstanceStack.current;

127 + return tracingMarkerStack.current;

128 }

129 return null;

130 }

packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js

+10 -57

@@ -13,7 +13,6 @@ import type {StackCursor} from './ReactFiberStack.old';

14 import {enableTransitionTracing} from 'shared/ReactFeatureFlags';

15 import {createCursor, push, pop} from './ReactFiberStack.old';

16 -import {getWorkInProgressTransitions} from './ReactFiberWorkLoop.old';