Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Transition Tracing] Add Offscreen Queue #24341

Merged
merged 2 commits into from
Apr 12, 2022
Merged

[Transition Tracing] Add Offscreen Queue #24341

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9a47d52
add offscreen queue
lunaruan Apr 11, 2022
e9d6b59
old
lunaruan Apr 11, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 32 additions & 0 deletions packages/react-reconciler/src/ReactFiberBeginWork.new.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ import type {SuspenseContext} from './ReactFiberSuspenseContext.new';
import type {
OffscreenProps,
OffscreenState,
OffscreenQueue,
} from './ReactFiberOffscreenComponent';
import type {
Cache,
Expand Down Expand Up @@ -255,6 +256,7 @@ import {
getSuspendedCache,
pushTransition,
getOffscreenDeferredCache,
getSuspendedTransitions,
} from './ReactFiberTransition.new';

const ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
Expand Down Expand Up @@ -2161,6 +2163,16 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
renderLanes,
);
workInProgress.memoizedState = SUSPENDED_MARKER;
if (enableTransitionTracing) {
const currentTransitions = getSuspendedTransitions();
if (currentTransitions !== null) {
const primaryChildUpdateQueue: OffscreenQueue = {
transitions: currentTransitions,
};
primaryChildFragment.updateQueue = primaryChildUpdateQueue;
}
}

return fallbackFragment;
} else if (
enableCPUSuspense &&
Expand Down Expand Up @@ -2281,6 +2293,15 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
prevOffscreenState === null
? mountSuspenseOffscreenState(renderLanes)
: updateSuspenseOffscreenState(prevOffscreenState, renderLanes);
if (enableTransitionTracing) {
const currentTransitions = getSuspendedTransitions();
if (currentTransitions !== null) {
const primaryChildUpdateQueue: OffscreenQueue = {
transitions: currentTransitions,
};
primaryChildFragment.updateQueue = primaryChildUpdateQueue;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How does this get cleared? In the PR description it says that you'll set the transitions field to null but I don't see that.

I would null out the entire update queue field (fiber.updateQueue = null) instead

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I set it in the commit phase (which is a separate PR, though I can also combine them).

}
}
primaryChildFragment.childLanes = getRemainingWorkInPrimaryTree(
current,
renderLanes,
Expand Down Expand Up @@ -2322,6 +2343,17 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
current,
renderLanes,
);

if (enableTransitionTracing) {
const currentTransitions = getSuspendedTransitions();
if (currentTransitions !== null) {
const primaryChildUpdateQueue: OffscreenQueue = {
transitions: currentTransitions,
};
primaryChildFragment.updateQueue = primaryChildUpdateQueue;
}
}

// Skip the primary children, and continue working on the
// fallback children.
workInProgress.memoizedState = SUSPENDED_MARKER;
Expand Down
32 changes: 32 additions & 0 deletions packages/react-reconciler/src/ReactFiberBeginWork.old.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ import type {SuspenseContext} from './ReactFiberSuspenseContext.old';
import type {
OffscreenProps,
OffscreenState,
OffscreenQueue,
} from './ReactFiberOffscreenComponent';
import type {
Cache,
Expand Down Expand Up @@ -255,6 +256,7 @@ import {
getSuspendedCache,
pushTransition,
getOffscreenDeferredCache,
getSuspendedTransitions,
} from './ReactFiberTransition.old';

const ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
Expand Down Expand Up @@ -2161,6 +2163,16 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
renderLanes,
);
workInProgress.memoizedState = SUSPENDED_MARKER;
if (enableTransitionTracing) {
const currentTransitions = getSuspendedTransitions();
if (currentTransitions !== null) {
const primaryChildUpdateQueue: OffscreenQueue = {
transitions: currentTransitions,
};
primaryChildFragment.updateQueue = primaryChildUpdateQueue;
}
}

return fallbackFragment;
} else if (
enableCPUSuspense &&
Expand Down Expand Up @@ -2281,6 +2293,15 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
prevOffscreenState === null
? mountSuspenseOffscreenState(renderLanes)
: updateSuspenseOffscreenState(prevOffscreenState, renderLanes);
if (enableTransitionTracing) {
const currentTransitions = getSuspendedTransitions();
if (currentTransitions !== null) {
const primaryChildUpdateQueue: OffscreenQueue = {
transitions: currentTransitions,
};
primaryChildFragment.updateQueue = primaryChildUpdateQueue;
}
}
primaryChildFragment.childLanes = getRemainingWorkInPrimaryTree(
current,
renderLanes,
Expand Down Expand Up @@ -2322,6 +2343,17 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
current,
renderLanes,
);

if (enableTransitionTracing) {
const currentTransitions = getSuspendedTransitions();
if (currentTransitions !== null) {
const primaryChildUpdateQueue: OffscreenQueue = {
transitions: currentTransitions,
};
primaryChildFragment.updateQueue = primaryChildUpdateQueue;
}
}

// Skip the primary children, and continue working on the
// fallback children.
workInProgress.memoizedState = SUSPENDED_MARKER;
Expand Down
5 changes: 5 additions & 0 deletions packages/react-reconciler/src/ReactFiberCommitWork.new.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2781,6 +2781,11 @@ function commitPassiveMountOnFiber(
}
}
}

if (enableTransitionTracing) {
// TODO: Add code to actually process the update queue
finishedWork.updateQueue = null;
}
break;
}
case CacheComponent: {
Expand Down
5 changes: 5 additions & 0 deletions packages/react-reconciler/src/ReactFiberCommitWork.old.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2781,6 +2781,11 @@ function commitPassiveMountOnFiber(
}
}
}

if (enableTransitionTracing) {
// TODO: Add code to actually process the update queue
finishedWork.updateQueue = null;
}
break;
}
case CacheComponent: {
Expand Down
5 changes: 5 additions & 0 deletions packages/react-reconciler/src/ReactFiberOffscreenComponent.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import type {ReactNodeList, OffscreenMode} from 'shared/ReactTypes';
import type {Lanes} from './ReactFiberLane.old';
import type {SpawnedCachePool} from './ReactFiberCacheComponent.new';
import type {Transition} from './ReactFiberTracingMarkerComponent.new';

export type OffscreenProps = {|
// TODO: Pick an API before exposing the Offscreen type. I've chosen an enum
// for now, since we might have multiple variants. For example, hiding the
Expand All @@ -33,4 +34,8 @@ export type OffscreenState = {|
transitions: Set<Transition> | null,
|};

export type OffscreenQueue = {|
transitions: Array<Transition> | null,
|} | null;

export type OffscreenInstance = {};