Skip to content

Commit 5c65303

Browse files
lunaruanlunaruan
committed
concat in commit rather than render phase for offscreen transitions
1 parent 87dba57 commit 5c65303

File tree

5 files changed

+80
-24
lines changed

5 files changed

+80
-24
lines changed

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

Lines changed: 23 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ import type {SuspenseContext} from './ReactFiberSuspenseContext.new';
2626
import type {
2727
OffscreenProps,
2828
OffscreenState,
29+
OffscreenQueue,
2930
} from './ReactFiberOffscreenComponent';
3031
import type {
3132
Cache,
@@ -2037,21 +2038,10 @@ function updateSuspenseOffscreenState(
20372038
}
20382039
}
20392040

2040-
let transitions = null;
2041-
if (enableTransitionTracing) {
2042-
const currentTransitions = getSuspendedTransitions();
2043-
const prevTransitions = prevOffscreenState.transitions;
2044-
if (prevTransitions !== null) {
2045-
transitions = prevTransitions.concat(currentTransitions);
2046-
} else {
2047-
transitions = currentTransitions;
2048-
}
2049-
}
2050-
20512041
return {
20522042
baseLanes: mergeLanes(prevOffscreenState.baseLanes, renderLanes),
20532043
cachePool,
2054-
transitions,
2044+
transitions: prevOffscreenState.transitions,
20552045
};
20562046
}
20572047

@@ -2310,13 +2300,23 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
23102300
nextFallbackChildren,
23112301
renderLanes,
23122302
);
2303+
23132304
const primaryChildFragment: Fiber = (workInProgress.child: any);
23142305
const prevOffscreenState: OffscreenState | null = (current.child: any)
23152306
.memoizedState;
23162307
primaryChildFragment.memoizedState =
23172308
prevOffscreenState === null
23182309
? mountSuspenseOffscreenState(renderLanes)
23192310
: updateSuspenseOffscreenState(prevOffscreenState, renderLanes);
2311+
if (enableTransitionTracing) {
2312+
const currentTransitions = getSuspendedTransitions();
2313+
if (currentTransitions !== null) {
2314+
const primaryChildUpdateQueue: OffscreenQueue = {
2315+
transitions: currentTransitions,
2316+
};
2317+
primaryChildFragment.updateQueue = primaryChildUpdateQueue;
2318+
}
2319+
}
23202320
primaryChildFragment.childLanes = getRemainingWorkInPrimaryTree(
23212321
current,
23222322
renderLanes,
@@ -2358,6 +2358,17 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
23582358
current,
23592359
renderLanes,
23602360
);
2361+
2362+
if (enableTransitionTracing) {
2363+
const currentTransitions = getSuspendedTransitions();
2364+
if (currentTransitions !== null) {
2365+
const primaryChildUpdateQueue: OffscreenQueue = {
2366+
transitions: currentTransitions,
2367+
};
2368+
primaryChildFragment.updateQueue = primaryChildUpdateQueue;
2369+
}
2370+
}
2371+
23612372
// Skip the primary children, and continue working on the
23622373
// fallback children.
23632374
workInProgress.memoizedState = SUSPENDED_MARKER;

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

Lines changed: 23 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ import type {SuspenseContext} from './ReactFiberSuspenseContext.old';
2626
import type {
2727
OffscreenProps,
2828
OffscreenState,
29+
OffscreenQueue,
2930
} from './ReactFiberOffscreenComponent';
3031
import type {
3132
Cache,
@@ -2037,21 +2038,10 @@ function updateSuspenseOffscreenState(
20372038
}
20382039
}
20392040

2040-
let transitions = null;
2041-
if (enableTransitionTracing) {
2042-
const currentTransitions = getSuspendedTransitions();
2043-
const prevTransitions = prevOffscreenState.transitions;
2044-
if (prevTransitions !== null) {
2045-
transitions = prevTransitions.concat(currentTransitions);
2046-
} else {
2047-
transitions = currentTransitions;
2048-
}
2049-
}
2050-
20512041
return {
20522042
baseLanes: mergeLanes(prevOffscreenState.baseLanes, renderLanes),
20532043
cachePool,
2054-
transitions,
2044+
transitions: prevOffscreenState.transitions,
20552045
};
20562046
}
20572047

@@ -2310,13 +2300,23 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
23102300
nextFallbackChildren,
23112301
renderLanes,
23122302
);
2303+
23132304
const primaryChildFragment: Fiber = (workInProgress.child: any);
23142305
const prevOffscreenState: OffscreenState | null = (current.child: any)
23152306
.memoizedState;
23162307
primaryChildFragment.memoizedState =
23172308
prevOffscreenState === null
23182309
? mountSuspenseOffscreenState(renderLanes)
23192310
: updateSuspenseOffscreenState(prevOffscreenState, renderLanes);
2311+
if (enableTransitionTracing) {
2312+
const currentTransitions = getSuspendedTransitions();
2313+
if (currentTransitions !== null) {
2314+
const primaryChildUpdateQueue: OffscreenQueue = {
2315+
transitions: currentTransitions,
2316+
};
2317+
primaryChildFragment.updateQueue = primaryChildUpdateQueue;
2318+
}
2319+
}
23202320
primaryChildFragment.childLanes = getRemainingWorkInPrimaryTree(
23212321
current,
23222322
renderLanes,
@@ -2358,6 +2358,17 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
23582358
current,
23592359
renderLanes,
23602360
);
2361+
2362+
if (enableTransitionTracing) {
2363+
const currentTransitions = getSuspendedTransitions();
2364+
if (currentTransitions !== null) {
2365+
const primaryChildUpdateQueue: OffscreenQueue = {
2366+
transitions: currentTransitions,
2367+
};
2368+
primaryChildFragment.updateQueue = primaryChildUpdateQueue;
2369+
}
2370+
}
2371+
23612372
// Skip the primary children, and continue working on the
23622373
// fallback children.
23632374
workInProgress.memoizedState = SUSPENDED_MARKER;

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2760,6 +2760,21 @@ function commitPassiveMountEffects_complete(
27602760
let props;
27612761
if (isFallback) {
27622762
props = fiber.pendingProps;
2763+
const queue = (fiber.updateQueue: any);
2764+
2765+
if (queue !== null) {
2766+
const transitions = queue.transitions;
2767+
const prevTransitions = fiber.memoizedState.transitions;
2768+
if (transitions != null) {
2769+
if (prevTransitions === null) {
2770+
fiber.memoizedState.transitions = transitions;
2771+
} else {
2772+
fiber.memoizedState.transitions = transitions.concat(
2773+
prevTransitions,
2774+
);
2775+
}
2776+
}
2777+
}
27632778
} else {
27642779
props = fiber.memoizedProps;
27652780
}

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2760,6 +2760,21 @@ function commitPassiveMountEffects_complete(
27602760
let props;
27612761
if (isFallback) {
27622762
props = fiber.pendingProps;
2763+
const queue = (fiber.updateQueue: any);
2764+
2765+
if (queue !== null) {
2766+
const transitions = queue.transitions;
2767+
const prevTransitions = fiber.memoizedState.transitions;
2768+
if (transitions != null) {
2769+
if (prevTransitions === null) {
2770+
fiber.memoizedState.transitions = transitions;
2771+
} else {
2772+
fiber.memoizedState.transitions = transitions.concat(
2773+
prevTransitions,
2774+
);
2775+
}
2776+
}
2777+
}
27632778
} else {
27642779
props = fiber.memoizedProps;
27652780
}

‎packages/react-reconciler/src/ReactFiberOffscreenComponent.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,4 +34,8 @@ export type OffscreenState = {|
3434
transitions: LazyTransitions | null,
3535
|};
3636

37+
export type OffscreenQueue = {|
38+
transitions: LazyTransitions,
39+
|} | null;
40+
3741
export type OffscreenInstance = {};

0 commit comments

Comments
 (0)