[DevTools] Refactor incompleteTransitions field from Root Fiber memoized state to FiberRoot (#24765)
`incompleteTransitions` persists across renders, so it should be part of the `fiber.stateNode` (ie FiberRoot) rather than `fiber.memoizedState`
Luna Ruan committed
Jun 20, 2022 at 20:08 UTC
cf665c4b73a28b034c8173f4d929205fb12d2d2e
7 files changed
+42
-60
packages/react-reconciler/src/ReactFiberBeginWork.new.js
-1
@@ -1317,7 +1317,6 @@ function updateHostRoot(current, workInProgress, renderLanes) {
1317
element: nextChildren,
1318
isDehydrated: false,
1319
cache: nextState.cache,
1320
- incompleteTransitions: nextState.incompleteTransitions,
1320
};
1321
const updateQueue: UpdateQueue<RootState> = (workInProgress.updateQueue: any);
1322
// `baseState` can always be the last state because the root doesn't
packages/react-reconciler/src/ReactFiberBeginWork.old.js
-1
@@ -1317,7 +1317,6 @@ function updateHostRoot(current, workInProgress, renderLanes) {
1317
element: nextChildren,
1318
isDehydrated: false,
1319
cache: nextState.cache,
1320
- incompleteTransitions: nextState.incompleteTransitions,
1320
};
1321
const updateQueue: UpdateQueue<RootState> = (workInProgress.updateQueue: any);
1322
// `baseState` can always be the last state because the root doesn't
packages/react-reconciler/src/ReactFiberCommitWork.new.js
+15
-16
@@ -2809,12 +2809,12 @@ function commitPassiveMountOnFiber(
2809
if (enableTransitionTracing) {
2810
// Get the transitions that were initiatized during the render
2811
// and add a start transition callback for each of them
2812
- const state = finishedWork.memoizedState;
2813
- let incompleteTransitions = state.incompleteTransitions;
2812
+ const root = finishedWork.stateNode;
2813
+ let incompleteTransitions = root.incompleteTransitions;
2814
// Initial render
2815
if (committedTransitions !== null) {
2816
- if (state.incompleteTransitions === null) {
2817
- state.incompleteTransitions = incompleteTransitions = new Map();
2816
+ if (incompleteTransitions === null) {
2817
+ root.incompleteTransitions = incompleteTransitions = new Map();
2818
}
2819
2820
committedTransitions.forEach(transition => {
@@ -2849,7 +2849,7 @@ function commitPassiveMountOnFiber(
2849
incompleteTransitions === null ||
2850
incompleteTransitions.size === 0
2851
) {
2852
- state.incompleteTransitions = null;
2852
+ root.incompleteTransitions = null;
2853
}
2854
}
2855
break;
@@ -2889,22 +2889,19 @@ function commitPassiveMountOnFiber(
2889
if (enableTransitionTracing) {
2890
const isFallback = finishedWork.memoizedState;
2891
const queue = (finishedWork.updateQueue: any);
2892
- const rootMemoizedState = finishedRoot.current.memoizedState;
2892
const instance = finishedWork.stateNode;
2893
2894
if (queue !== null) {
2895
if (isFallback) {
2896
const transitions = queue.transitions;
2897
let prevTransitions = instance.transitions;
2899
- let rootIncompleteTransitions =
2900
- rootMemoizedState.incompleteTransitions;
2898
+ let rootIncompleteTransitions = finishedRoot.incompleteTransitions;
2899
2900
// We lazily instantiate transition tracing relevant maps
2901
// and sets in the commit phase as we need to use them. We only
2902
// instantiate them in the fallback phase on an as needed basis
2905
- if (rootMemoizedState.incompleteTransitions === null) {
2906
- // TODO(luna): Move this to the fiber root
2907
- rootMemoizedState.incompleteTransitions = rootIncompleteTransitions = new Map();
2903
+ if (rootIncompleteTransitions === null) {
2904
+ finishedRoot.incompleteTransitions = rootIncompleteTransitions = new Map();
2905
}
2906
if (instance.pendingMarkers === null) {
2907
instance.pendingMarkers = new Set();
@@ -2924,12 +2921,14 @@ function commitPassiveMountOnFiber(
2921
// the queue's marker set. We will iterate through the marker
2922
// set when we toggle state on the suspense boundary and
2923
// add or remove the pending suspense boundaries as needed.
2927
- if (!rootIncompleteTransitions.has(transition)) {
2928
- rootIncompleteTransitions.set(transition, new Map());
2924
+ if (rootIncompleteTransitions !== null) {
2925
+ if (!rootIncompleteTransitions.has(transition)) {
2926
+ rootIncompleteTransitions.set(transition, new Map());
2927
+ }
2928
+ instance.pendingMarkers.add(
2929
+ rootIncompleteTransitions.get(transition),
2930
+ );
2931
}
2930
- instance.pendingMarkers.add(
2931
- rootIncompleteTransitions.get(transition),
2932
- );
2932
});
2933
}
2934
}
packages/react-reconciler/src/ReactFiberCommitWork.old.js
+15
-16
@@ -2809,12 +2809,12 @@ function commitPassiveMountOnFiber(
2809
if (enableTransitionTracing) {
2810
// Get the transitions that were initiatized during the render
2811
// and add a start transition callback for each of them
2812
- const state = finishedWork.memoizedState;
2813
- let incompleteTransitions = state.incompleteTransitions;
2812
+ const root = finishedWork.stateNode;
2813
+ let incompleteTransitions = root.incompleteTransitions;
2814
// Initial render
2815
if (committedTransitions !== null) {
2816
- if (state.incompleteTransitions === null) {
2817
- state.incompleteTransitions = incompleteTransitions = new Map();
2816
+ if (incompleteTransitions === null) {
2817
+ root.incompleteTransitions = incompleteTransitions = new Map();
2818
}
2819
2820
committedTransitions.forEach(transition => {
@@ -2849,7 +2849,7 @@ function commitPassiveMountOnFiber(
2849
incompleteTransitions === null ||
2850
incompleteTransitions.size === 0
2851
) {
2852
- state.incompleteTransitions = null;
2852
+ root.incompleteTransitions = null;
2853
}
2854
}
2855
break;
@@ -2889,22 +2889,19 @@ function commitPassiveMountOnFiber(
2889
if (enableTransitionTracing) {
2890
const isFallback = finishedWork.memoizedState;
2891
const queue = (finishedWork.updateQueue: any);
2892
- const rootMemoizedState = finishedRoot.current.memoizedState;
2892
const instance = finishedWork.stateNode;
2893
2894
if (queue !== null) {
2895
if (isFallback) {
2896
const transitions = queue.transitions;
2897
let prevTransitions = instance.transitions;
2899
- let rootIncompleteTransitions =
2900
- rootMemoizedState.incompleteTransitions;
2898
+ let rootIncompleteTransitions = finishedRoot.incompleteTransitions;
2899
2900
// We lazily instantiate transition tracing relevant maps
2901
// and sets in the commit phase as we need to use them. We only
2902
// instantiate them in the fallback phase on an as needed basis
2905
- if (rootMemoizedState.incompleteTransitions === null) {
2906
- // TODO(luna): Move this to the fiber root
2907
- rootMemoizedState.incompleteTransitions = rootIncompleteTransitions = new Map();
2903
+ if (rootIncompleteTransitions === null) {
2904
+ finishedRoot.incompleteTransitions = rootIncompleteTransitions = new Map();
2905
}
2906
if (instance.pendingMarkers === null) {
2907
instance.pendingMarkers = new Set();
@@ -2924,12 +2921,14 @@ function commitPassiveMountOnFiber(
2921
// the queue's marker set. We will iterate through the marker
2922
// set when we toggle state on the suspense boundary and
2923
// add or remove the pending suspense boundaries as needed.
2927
- if (!rootIncompleteTransitions.has(transition)) {
2928
- rootIncompleteTransitions.set(transition, new Map());
2924
+ if (rootIncompleteTransitions !== null) {
2925
+ if (!rootIncompleteTransitions.has(transition)) {
2926
+ rootIncompleteTransitions.set(transition, new Map());
2927
+ }
2928
+ instance.pendingMarkers.add(
2929
+ rootIncompleteTransitions.get(transition),
2930
+ );
2931
}
2930
- instance.pendingMarkers.add(
2931
- rootIncompleteTransitions.get(transition),
2932
- );
2932
});
2933
}
2934
}
packages/react-reconciler/src/ReactFiberRoot.new.js
+1
-13
@@ -15,10 +15,6 @@ import type {
15
} from './ReactInternalTypes';
16
import type {RootTag} from './ReactRootTags';
17
import type {Cache} from './ReactFiberCacheComponent.new';
18
-import type {
19
- PendingSuspenseBoundaries,
20
- Transition,
21
-} from './ReactFiberTracingMarkerComponent.new';
18
19
import {noTimeout, supportsHydration} from './ReactFiberHostConfig';
20
import {createHostRootFiber} from './ReactFiber.new';
@@ -45,13 +41,6 @@ export type RootState = {
41
element: any,
42
isDehydrated: boolean,
43
cache: Cache,
48
- // Transitions on the root can be represented as a bunch of tracing markers.
49
- // Each entangled group of transitions can be treated as a tracing marker.
50
- // It will have a set of pending suspense boundaries. These transitions
51
- // are considered complete when the pending suspense boundaries set is
52
- // empty. We can represent this as a Map of transitions to suspense
53
- // boundary sets
54
- incompleteTransitions: Map<Transition, PendingSuspenseBoundaries> | null,
44
};
45
46
function FiberRootNode(
@@ -109,6 +98,7 @@ function FiberRootNode(
98
for (let i = 0; i < TotalLanes; i++) {
99
transitionLanesMap.push(null);
100
}
101
+ this.incompleteTransitions = null;
102
}
103
104
if (enableProfilerTimer && enableProfilerCommitHooks) {
@@ -194,7 +184,6 @@ export function createFiberRoot(
184
element: initialChildren,
185
isDehydrated: hydrate,
186
cache: initialCache,
197
- incompleteTransitions: null,
187
};
188
uninitializedFiber.memoizedState = initialState;
189
} else {
@@ -202,7 +191,6 @@ export function createFiberRoot(
191
element: initialChildren,
192
isDehydrated: hydrate,
193
cache: (null: any), // not enabled yet
205
- incompleteTransitions: null,
194
};
195
uninitializedFiber.memoizedState = initialState;
196
}
packages/react-reconciler/src/ReactFiberRoot.old.js
+1
-13
@@ -15,10 +15,6 @@ import type {
15
} from './ReactInternalTypes';
16
import type {RootTag} from './ReactRootTags';
17
import type {Cache} from './ReactFiberCacheComponent.old';
18
-import type {
19
- PendingSuspenseBoundaries,
20
- Transition,
21
-} from './ReactFiberTracingMarkerComponent.old';
18
19
import {noTimeout, supportsHydration} from './ReactFiberHostConfig';
20
import {createHostRootFiber} from './ReactFiber.old';
@@ -45,13 +41,6 @@ export type RootState = {
41
element: any,
42
isDehydrated: boolean,
43
cache: Cache,
48
- // Transitions on the root can be represented as a bunch of tracing markers.
49
- // Each entangled group of transitions can be treated as a tracing marker.
50
- // It will have a set of pending suspense boundaries. These transitions
51
- // are considered complete when the pending suspense boundaries set is
52
- // empty. We can represent this as a Map of transitions to suspense
53
- // boundary sets
54
- incompleteTransitions: Map<Transition, PendingSuspenseBoundaries> | null,
44
};
45
46
function FiberRootNode(
@@ -107,6 +96,7 @@ function FiberRootNode(
96
for (let i = 0; i < TotalLanes; i++) {
97
transitionLanesMap.push(null);
98
}
99
+ this.incompleteTransitions = null;
100
}
101
102
if (enableProfilerTimer && enableProfilerCommitHooks) {
@@ -192,7 +182,6 @@ export function createFiberRoot(
182
element: initialChildren,
183
isDehydrated: hydrate,
184
cache: initialCache,
195
- incompleteTransitions: null,
185
};
186
uninitializedFiber.memoizedState = initialState;
187
} else {
@@ -200,7 +189,6 @@ export function createFiberRoot(
189
element: initialChildren,
190
isDehydrated: hydrate,
191
cache: (null: any), // not enabled yet
203
- incompleteTransitions: null,
192
};
193
uninitializedFiber.memoizedState = initialState;
194
}
packages/react-reconciler/src/ReactInternalTypes.js
+10
@@ -26,6 +26,9 @@ import type {Lane, Lanes, LaneMap} from './ReactFiberLane.old';
26
import type {RootTag} from './ReactRootTags';
27
import type {TimeoutHandle, NoTimeout} from './ReactFiberHostConfig';
28
import type {Cache} from './ReactFiberCacheComponent.old';
29
+// Doing this because there's a merge conflict because of the way sync-reconciler-fork
30
+// is implemented
31
+import type {PendingSuspenseBoundaries} from './ReactFiberTracingMarkerComponent.new';
32
import type {Transition} from './ReactFiberTracingMarkerComponent.new';
33
import type {ConcurrentUpdate} from './ReactFiberConcurrentUpdates.new';
34
@@ -326,6 +329,13 @@ export type TransitionTracingCallbacks = {
329
type TransitionTracingOnlyFiberRootProperties = {|
330
transitionCallbacks: null | TransitionTracingCallbacks,
331
transitionLanes: Array<Array<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
335
+ // are considered complete when the pending suspense boundaries set is
336
+ // empty. We can represent this as a Map of transitions to suspense
337
+ // boundary sets
338
+ incompleteTransitions: Map<Transition, PendingSuspenseBoundaries> | null,
339
|};
340
341
// Exported FiberRoot type includes all properties,