Skip to content

Commit cf665c4

Browse files
lunaruanlunaruan
authored
[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`
1 parent d6255f0 commit cf665c4

7 files changed

+42
-60
lines changed

Diff for: ‎packages/react-reconciler/src/ReactFiberBeginWork.new.js

-1
Original file line numberDiff line numberDiff line change
@@ -1317,7 +1317,6 @@ function updateHostRoot(current, workInProgress, renderLanes) {
13171317
element: nextChildren,
13181318
isDehydrated: false,
13191319
cache: nextState.cache,
1320-
incompleteTransitions: nextState.incompleteTransitions,
13211320
};
13221321
const updateQueue: UpdateQueue<RootState> = (workInProgress.updateQueue: any);
13231322
// `baseState` can always be the last state because the root doesn't

Diff for: ‎packages/react-reconciler/src/ReactFiberBeginWork.old.js

-1
Original file line numberDiff line numberDiff line change
@@ -1317,7 +1317,6 @@ function updateHostRoot(current, workInProgress, renderLanes) {
13171317
element: nextChildren,
13181318
isDehydrated: false,
13191319
cache: nextState.cache,
1320-
incompleteTransitions: nextState.incompleteTransitions,
13211320
};
13221321
const updateQueue: UpdateQueue<RootState> = (workInProgress.updateQueue: any);
13231322
// `baseState` can always be the last state because the root doesn't

Diff for: ‎packages/react-reconciler/src/ReactFiberCommitWork.new.js

+15-16
Original file line numberDiff line numberDiff line change
@@ -2809,12 +2809,12 @@ function commitPassiveMountOnFiber(
28092809
if (enableTransitionTracing) {
28102810
// Get the transitions that were initiatized during the render
28112811
// 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;
28142814
// Initial render
28152815
if (committedTransitions !== null) {
2816-
if (state.incompleteTransitions === null) {
2817-
state.incompleteTransitions = incompleteTransitions = new Map();
2816+
if (incompleteTransitions === null) {
2817+
root.incompleteTransitions = incompleteTransitions = new Map();
28182818
}
28192819

28202820
committedTransitions.forEach(transition => {
@@ -2849,7 +2849,7 @@ function commitPassiveMountOnFiber(
28492849
incompleteTransitions === null ||
28502850
incompleteTransitions.size === 0
28512851
) {
2852-
state.incompleteTransitions = null;
2852+
root.incompleteTransitions = null;
28532853
}
28542854
}
28552855
break;
@@ -2889,22 +2889,19 @@ function commitPassiveMountOnFiber(
28892889
if (enableTransitionTracing) {
28902890
const isFallback = finishedWork.memoizedState;
28912891
const queue = (finishedWork.updateQueue: any);
2892-
const rootMemoizedState = finishedRoot.current.memoizedState;
28932892
const instance = finishedWork.stateNode;
28942893

28952894
if (queue !== null) {
28962895
if (isFallback) {
28972896
const transitions = queue.transitions;
28982897
let prevTransitions = instance.transitions;
2899-
let rootIncompleteTransitions =
2900-
rootMemoizedState.incompleteTransitions;
2898+
let rootIncompleteTransitions = finishedRoot.incompleteTransitions;
29012899

29022900
// We lazily instantiate transition tracing relevant maps
29032901
// and sets in the commit phase as we need to use them. We only
29042902
// 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();
29082905
}
29092906
if (instance.pendingMarkers === null) {
29102907
instance.pendingMarkers = new Set();
@@ -2924,12 +2921,14 @@ function commitPassiveMountOnFiber(
29242921
// the queue's marker set. We will iterate through the marker
29252922
// set when we toggle state on the suspense boundary and
29262923
// 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+
);
29292931
}
2930-
instance.pendingMarkers.add(
2931-
rootIncompleteTransitions.get(transition),
2932-
);
29332932
});
29342933
}
29352934
}

Diff for: ‎packages/react-reconciler/src/ReactFiberCommitWork.old.js

+15-16
Original file line numberDiff line numberDiff line change
@@ -2809,12 +2809,12 @@ function commitPassiveMountOnFiber(
28092809
if (enableTransitionTracing) {
28102810
// Get the transitions that were initiatized during the render
28112811
// 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;
28142814
// Initial render
28152815
if (committedTransitions !== null) {
2816-
if (state.incompleteTransitions === null) {
2817-
state.incompleteTransitions = incompleteTransitions = new Map();
2816+
if (incompleteTransitions === null) {
2817+
root.incompleteTransitions = incompleteTransitions = new Map();
28182818
}
28192819

28202820
committedTransitions.forEach(transition => {
@@ -2849,7 +2849,7 @@ function commitPassiveMountOnFiber(
28492849
incompleteTransitions === null ||
28502850
incompleteTransitions.size === 0
28512851
) {
2852-
state.incompleteTransitions = null;
2852+
root.incompleteTransitions = null;
28532853
}
28542854
}
28552855
break;
@@ -2889,22 +2889,19 @@ function commitPassiveMountOnFiber(
28892889
if (enableTransitionTracing) {
28902890
const isFallback = finishedWork.memoizedState;
28912891
const queue = (finishedWork.updateQueue: any);
2892-
const rootMemoizedState = finishedRoot.current.memoizedState;
28932892
const instance = finishedWork.stateNode;
28942893

28952894
if (queue !== null) {
28962895
if (isFallback) {
28972896
const transitions = queue.transitions;
28982897
let prevTransitions = instance.transitions;
2899-
let rootIncompleteTransitions =
2900-
rootMemoizedState.incompleteTransitions;
2898+
let rootIncompleteTransitions = finishedRoot.incompleteTransitions;
29012899

29022900
// We lazily instantiate transition tracing relevant maps
29032901
// and sets in the commit phase as we need to use them. We only
29042902
// 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();
29082905
}
29092906
if (instance.pendingMarkers === null) {
29102907
instance.pendingMarkers = new Set();
@@ -2924,12 +2921,14 @@ function commitPassiveMountOnFiber(
29242921
// the queue's marker set. We will iterate through the marker
29252922
// set when we toggle state on the suspense boundary and
29262923
// 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+
);
29292931
}
2930-
instance.pendingMarkers.add(
2931-
rootIncompleteTransitions.get(transition),
2932-
);
29332932
});
29342933
}
29352934
}

Diff for: ‎packages/react-reconciler/src/ReactFiberRoot.new.js

+1-13
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,6 @@ import type {
1515
} from './ReactInternalTypes';
1616
import type {RootTag} from './ReactRootTags';
1717
import type {Cache} from './ReactFiberCacheComponent.new';
18-
import type {
19-
PendingSuspenseBoundaries,
20-
Transition,
21-
} from './ReactFiberTracingMarkerComponent.new';
2218

2319
import {noTimeout, supportsHydration} from './ReactFiberHostConfig';
2420
import {createHostRootFiber} from './ReactFiber.new';
@@ -45,13 +41,6 @@ export type RootState = {
4541
element: any,
4642
isDehydrated: boolean,
4743
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,
5544
};
5645

5746
function FiberRootNode(
@@ -109,6 +98,7 @@ function FiberRootNode(
10998
for (let i = 0; i < TotalLanes; i++) {
11099
transitionLanesMap.push(null);
111100
}
101+
this.incompleteTransitions = null;
112102
}
113103

114104
if (enableProfilerTimer && enableProfilerCommitHooks) {
@@ -194,15 +184,13 @@ export function createFiberRoot(
194184
element: initialChildren,
195185
isDehydrated: hydrate,
196186
cache: initialCache,
197-
incompleteTransitions: null,
198187
};
199188
uninitializedFiber.memoizedState = initialState;
200189
} else {
201190
const initialState: RootState = {
202191
element: initialChildren,
203192
isDehydrated: hydrate,
204193
cache: (null: any), // not enabled yet
205-
incompleteTransitions: null,
206194
};
207195
uninitializedFiber.memoizedState = initialState;
208196
}

Diff for: ‎packages/react-reconciler/src/ReactFiberRoot.old.js

+1-13
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,6 @@ import type {
1515
} from './ReactInternalTypes';
1616
import type {RootTag} from './ReactRootTags';
1717
import type {Cache} from './ReactFiberCacheComponent.old';
18-
import type {
19-
PendingSuspenseBoundaries,
20-
Transition,
21-
} from './ReactFiberTracingMarkerComponent.old';
2218

2319
import {noTimeout, supportsHydration} from './ReactFiberHostConfig';
2420
import {createHostRootFiber} from './ReactFiber.old';
@@ -45,13 +41,6 @@ export type RootState = {
4541
element: any,
4642
isDehydrated: boolean,
4743
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,
5544
};
5645

5746
function FiberRootNode(
@@ -107,6 +96,7 @@ function FiberRootNode(
10796
for (let i = 0; i < TotalLanes; i++) {
10897
transitionLanesMap.push(null);
10998
}
99+
this.incompleteTransitions = null;
110100
}
111101

112102
if (enableProfilerTimer && enableProfilerCommitHooks) {
@@ -192,15 +182,13 @@ export function createFiberRoot(
192182
element: initialChildren,
193183
isDehydrated: hydrate,
194184
cache: initialCache,
195-
incompleteTransitions: null,
196185
};
197186
uninitializedFiber.memoizedState = initialState;
198187
} else {
199188
const initialState: RootState = {
200189
element: initialChildren,
201190
isDehydrated: hydrate,
202191
cache: (null: any), // not enabled yet
203-
incompleteTransitions: null,
204192
};
205193
uninitializedFiber.memoizedState = initialState;
206194
}

Diff for: ‎packages/react-reconciler/src/ReactInternalTypes.js

+10
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,9 @@ import type {Lane, Lanes, LaneMap} from './ReactFiberLane.old';
2626
import type {RootTag} from './ReactRootTags';
2727
import type {TimeoutHandle, NoTimeout} from './ReactFiberHostConfig';
2828
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';
2932
import type {Transition} from './ReactFiberTracingMarkerComponent.new';
3033
import type {ConcurrentUpdate} from './ReactFiberConcurrentUpdates.new';
3134

@@ -326,6 +329,13 @@ export type TransitionTracingCallbacks = {
326329
type TransitionTracingOnlyFiberRootProperties = {|
327330
transitionCallbacks: null | TransitionTracingCallbacks,
328331
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,
329339
|};
330340

331341
// Exported FiberRoot type includes all properties,

0 commit comments

Comments
 (0)