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

Add ref to Offscreen component #25254

Merged
merged 6 commits into from
Sep 23, 2022
Merged

Add ref to Offscreen component #25254

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
a86f80d
Expose ref to Offscreen if mode is manual
sammy-SC Sep 13, 2022
d8611ac
Prepend private fields on OffscreenInstance with underscore
sammy-SC Sep 13, 2022
a8f7a96
Schedule Ref effect unconditionally on Offscreen
sammy-SC Sep 21, 2022
1608017
Make sure Offscreen's ref is detached when unmounted
sammy-SC Sep 21, 2022
4320341
Make sure ref is mounted/unmounted in all scenarious
sammy-SC Sep 21, 2022
c7e962f
Nit: pendingProps -> memoizedProps
acdlite Sep 23, 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
16 changes: 8 additions & 8 deletions packages/react-reconciler/src/ReactFiber.new.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -719,10 +719,10 @@ export function createFiberFromOffscreen(
fiber.elementType = REACT_OFFSCREEN_TYPE;
fiber.lanes = lanes;
const primaryChildInstance: OffscreenInstance = {
visibility: OffscreenVisible,
pendingMarkers: null,
retryCache: null,
transitions: null,
_visibility: OffscreenVisible,
_pendingMarkers: null,
_retryCache: null,
_transitions: null,
};
fiber.stateNode = primaryChildInstance;
return fiber;
Expand All @@ -740,10 +740,10 @@ export function createFiberFromLegacyHidden(
// Adding a stateNode for legacy hidden because it's currently using
// the offscreen implementation, which depends on a state node
const instance: OffscreenInstance = {
visibility: OffscreenVisible,
pendingMarkers: null,
transitions: null,
retryCache: null,
_visibility: OffscreenVisible,
_pendingMarkers: null,
_transitions: null,
_retryCache: null,
};
fiber.stateNode = instance;
return fiber;
Expand Down
16 changes: 8 additions & 8 deletions packages/react-reconciler/src/ReactFiber.old.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -719,10 +719,10 @@ export function createFiberFromOffscreen(
fiber.elementType = REACT_OFFSCREEN_TYPE;
fiber.lanes = lanes;
const primaryChildInstance: OffscreenInstance = {
visibility: OffscreenVisible,
pendingMarkers: null,
retryCache: null,
transitions: null,
_visibility: OffscreenVisible,
_pendingMarkers: null,
_retryCache: null,
_transitions: null,
};
fiber.stateNode = primaryChildInstance;
return fiber;
Expand All @@ -740,10 +740,10 @@ export function createFiberFromLegacyHidden(
// Adding a stateNode for legacy hidden because it's currently using
// the offscreen implementation, which depends on a state node
const instance: OffscreenInstance = {
visibility: OffscreenVisible,
pendingMarkers: null,
transitions: null,
retryCache: null,
_visibility: OffscreenVisible,
_pendingMarkers: null,
_transitions: null,
_retryCache: null,
};
fiber.stateNode = instance;
return fiber;
Expand Down
6 changes: 4 additions & 2 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 @@ -677,6 +677,8 @@ function updateOffscreenComponent(
const prevState: OffscreenState | null =
current !== null ? current.memoizedState : null;

markRef(current, workInProgress);

if (
nextProps.mode === 'hidden' ||
(enableLegacyHidden && nextProps.mode === 'unstable-defer-without-hiding')
Expand Down Expand Up @@ -811,8 +813,8 @@ function updateOffscreenComponent(
// We have now gone from hidden to visible, so any transitions should
// be added to the stack to get added to any Offscreen/suspense children
const instance: OffscreenInstance | null = workInProgress.stateNode;
if (instance !== null && instance.transitions != null) {
transitions = Array.from(instance.transitions);
if (instance !== null && instance._transitions != null) {
transitions = Array.from(instance._transitions);
}
}

Expand Down
6 changes: 4 additions & 2 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 @@ -677,6 +677,8 @@ function updateOffscreenComponent(
const prevState: OffscreenState | null =
current !== null ? current.memoizedState : null;

markRef(current, workInProgress);

if (
nextProps.mode === 'hidden' ||
(enableLegacyHidden && nextProps.mode === 'unstable-defer-without-hiding')
Expand Down Expand Up @@ -811,8 +813,8 @@ function updateOffscreenComponent(
// We have now gone from hidden to visible, so any transitions should
// be added to the stack to get added to any Offscreen/suspense children
const instance: OffscreenInstance | null = workInProgress.stateNode;
if (instance !== null && instance.transitions != null) {
transitions = Array.from(instance.transitions);
if (instance !== null && instance._transitions != null) {
transitions = Array.from(instance._transitions);
}
}

Expand Down
77 changes: 49 additions & 28 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 @@ -26,6 +26,7 @@ import type {
OffscreenState,
OffscreenInstance,
OffscreenQueue,
OffscreenProps,
} from './ReactFiberOffscreenComponent';
import type {HookFlags} from './ReactHookEffectTags';
import type {Cache} from './ReactFiberCacheComponent.new';
Expand Down Expand Up @@ -1123,6 +1124,14 @@ function commitLayoutEffectOnFiber(
committedLanes,
);
}
if (flags & Ref) {
const props: OffscreenProps = finishedWork.memoizedProps;
if (props.mode === 'manual') {
safelyAttachRef(finishedWork, finishedWork.return);
} else {
safelyDetachRef(finishedWork, finishedWork.return);
}
}
break;
}
default: {
Expand Down Expand Up @@ -1296,7 +1305,7 @@ function commitTransitionProgress(offscreenFiber: Fiber) {
const wasHidden = prevState !== null;
const isHidden = nextState !== null;

const pendingMarkers = offscreenInstance.pendingMarkers;
const pendingMarkers = offscreenInstance._pendingMarkers;
// If there is a name on the suspense boundary, store that in
// the pending boundaries.
let name = null;
Expand Down Expand Up @@ -2126,6 +2135,7 @@ function commitDeletionEffectsOnFiber(
return;
}
case OffscreenComponent: {
safelyDetachRef(deletedFiber, nearestMountedAncestor);
if (deletedFiber.mode & ConcurrentMode) {
// If this offscreen component is hidden, we already unmounted it. Before
// deleting the children, track that it's already unmounted so that we
Expand Down Expand Up @@ -2232,9 +2242,9 @@ function getRetryCache(finishedWork) {
}
case OffscreenComponent: {
const instance: OffscreenInstance = finishedWork.stateNode;
let retryCache = instance.retryCache;
let retryCache = instance._retryCache;
if (retryCache === null) {
retryCache = instance.retryCache = new PossiblyWeakSet();
retryCache = instance._retryCache = new PossiblyWeakSet();
}
return retryCache;
}
Expand Down Expand Up @@ -2605,6 +2615,12 @@ function commitMutationEffectsOnFiber(
return;
}
case OffscreenComponent: {
if (flags & Ref) {
if (current !== null) {
safelyDetachRef(current, current.return);
}
}

const newState: OffscreenState | null = finishedWork.memoizedState;
const isHidden = newState !== null;
const wasHidden = current !== null && current.memoizedState !== null;
Expand Down Expand Up @@ -2633,9 +2649,9 @@ function commitMutationEffectsOnFiber(
// Track the current state on the Offscreen instance so we can
// read it during an event
if (isHidden) {
offscreenInstance.visibility &= ~OffscreenVisible;
offscreenInstance._visibility &= ~OffscreenVisible;
} else {
offscreenInstance.visibility |= OffscreenVisible;
offscreenInstance._visibility |= OffscreenVisible;
}

if (isHidden) {
Expand Down Expand Up @@ -2820,6 +2836,9 @@ export function disappearLayoutEffects(finishedWork: Fiber) {
break;
}
case OffscreenComponent: {
// TODO (Offscreen) Check: flags & RefStatic
safelyDetachRef(finishedWork, finishedWork.return);

const isHidden = finishedWork.memoizedState !== null;
if (isHidden) {
// Nested Offscreen tree is already hidden. Don't disappear
Expand Down Expand Up @@ -2967,6 +2986,8 @@ export function reappearLayoutEffects(
includeWorkInProgressEffects,
);
}
// TODO: Check flags & Ref
safelyAttachRef(finishedWork, finishedWork.return);
break;
}
default: {
Expand Down Expand Up @@ -3080,10 +3101,10 @@ function commitOffscreenPassiveMountEffects(
// Add all the transitions saved in the update queue during
// the render phase (ie the transitions associated with this boundary)
// into the transitions set.
if (instance.transitions === null) {
instance.transitions = new Set();
if (instance._transitions === null) {
instance._transitions = new Set();
}
instance.transitions.add(transition);
instance._transitions.add(transition);
});
}

Expand All @@ -3096,17 +3117,17 @@ function commitOffscreenPassiveMountEffects(
// caused them
if (markerTransitions !== null) {
markerTransitions.forEach(transition => {
if (instance.transitions === null) {
instance.transitions = new Set();
} else if (instance.transitions.has(transition)) {
if (instance._transitions === null) {
instance._transitions = new Set();
} else if (instance._transitions.has(transition)) {
if (markerInstance.pendingBoundaries === null) {
markerInstance.pendingBoundaries = new Map();
}
if (instance.pendingMarkers === null) {
instance.pendingMarkers = new Set();
if (instance._pendingMarkers === null) {
instance._pendingMarkers = new Set();
}

instance.pendingMarkers.add(markerInstance);
instance._pendingMarkers.add(markerInstance);
}
});
}
Expand All @@ -3121,8 +3142,8 @@ function commitOffscreenPassiveMountEffects(

// TODO: Refactor this into an if/else branch
if (!isHidden) {
instance.transitions = null;
instance.pendingMarkers = null;
instance._transitions = null;
instance._pendingMarkers = null;
}
}
}
Expand Down Expand Up @@ -3302,7 +3323,7 @@ function commitPassiveMountOnFiber(
const isHidden = nextState !== null;

if (isHidden) {
if (instance.visibility & OffscreenPassiveEffectsConnected) {
if (instance._visibility & OffscreenPassiveEffectsConnected) {
// The effects are currently connected. Update them.
recursivelyTraversePassiveMountEffects(
finishedRoot,
Expand All @@ -3327,7 +3348,7 @@ function commitPassiveMountOnFiber(
}
} else {
// Legacy Mode: Fire the effects even if the tree is hidden.
instance.visibility |= OffscreenPassiveEffectsConnected;
instance._visibility |= OffscreenPassiveEffectsConnected;
recursivelyTraversePassiveMountEffects(
finishedRoot,
finishedWork,
Expand All @@ -3338,7 +3359,7 @@ function commitPassiveMountOnFiber(
}
} else {
// Tree is visible
if (instance.visibility & OffscreenPassiveEffectsConnected) {
if (instance._visibility & OffscreenPassiveEffectsConnected) {
// The effects are currently connected. Update them.
recursivelyTraversePassiveMountEffects(
finishedRoot,
Expand All @@ -3350,7 +3371,7 @@ function commitPassiveMountOnFiber(
// The effects are currently disconnected. Reconnect them, while also
// firing effects inside newly mounted trees. This also applies to
// the initial render.
instance.visibility |= OffscreenPassiveEffectsConnected;
instance._visibility |= OffscreenPassiveEffectsConnected;

const includeWorkInProgressEffects =
(finishedWork.subtreeFlags & PassiveMask) !== NoFlags;
Expand Down Expand Up @@ -3482,7 +3503,7 @@ export function reconnectPassiveEffects(
const isHidden = nextState !== null;

if (isHidden) {
if (instance.visibility & OffscreenPassiveEffectsConnected) {
if (instance._visibility & OffscreenPassiveEffectsConnected) {
// The effects are currently connected. Update them.
recursivelyTraverseReconnectPassiveEffects(
finishedRoot,
Expand All @@ -3508,7 +3529,7 @@ export function reconnectPassiveEffects(
}
} else {
// Legacy Mode: Fire the effects even if the tree is hidden.
instance.visibility |= OffscreenPassiveEffectsConnected;
instance._visibility |= OffscreenPassiveEffectsConnected;
recursivelyTraverseReconnectPassiveEffects(
finishedRoot,
finishedWork,
Expand All @@ -3526,7 +3547,7 @@ export function reconnectPassiveEffects(
// continue traversing the tree and firing all the effects.
//
// We do need to set the "connected" flag on the instance, though.
instance.visibility |= OffscreenPassiveEffectsConnected;
instance._visibility |= OffscreenPassiveEffectsConnected;

recursivelyTraverseReconnectPassiveEffects(
finishedRoot,
Expand Down Expand Up @@ -3781,7 +3802,7 @@ function commitPassiveUnmountOnFiber(finishedWork: Fiber): void {

if (
isHidden &&
instance.visibility & OffscreenPassiveEffectsConnected &&
instance._visibility & OffscreenPassiveEffectsConnected &&
// For backwards compatibility, don't unmount when a tree suspends. In
// the future we may change this to unmount after a delay.
(finishedWork.return === null ||
Expand All @@ -3791,7 +3812,7 @@ function commitPassiveUnmountOnFiber(finishedWork: Fiber): void {
// TODO: Add option or heuristic to delay before disconnecting the
// effects. Then if the tree reappears before the delay has elapsed, we
// can skip toggling the effects entirely.
instance.visibility &= ~OffscreenPassiveEffectsConnected;
instance._visibility &= ~OffscreenPassiveEffectsConnected;
recursivelyTraverseDisconnectPassiveEffects(finishedWork);
} else {
recursivelyTraversePassiveUnmountEffects(finishedWork);
Expand Down Expand Up @@ -3855,8 +3876,8 @@ export function disconnectPassiveEffect(finishedWork: Fiber): void {
}
case OffscreenComponent: {
const instance: OffscreenInstance = finishedWork.stateNode;
if (instance.visibility & OffscreenPassiveEffectsConnected) {
instance.visibility &= ~OffscreenPassiveEffectsConnected;
if (instance._visibility & OffscreenPassiveEffectsConnected) {
instance._visibility &= ~OffscreenPassiveEffectsConnected;
recursivelyTraverseDisconnectPassiveEffects(finishedWork);
} else {
// The effects are already disconnected.
Expand Down Expand Up @@ -3984,7 +4005,7 @@ function commitPassiveUnmountInsideDeletedTreeOnFiber(
// We need to mark this fiber's parents as deleted
const offscreenFiber: Fiber = (current.child: any);
const instance: OffscreenInstance = offscreenFiber.stateNode;
const transitions = instance.transitions;
const transitions = instance._transitions;
if (transitions !== null) {
const abortReason = {
reason: 'suspense',
Expand Down
Loading