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

Do not unmount layout effects if ancestor Offscreen is hidden #25628

Merged
merged 5 commits into from
Nov 4, 2022
Merged

Do not unmount layout effects if ancestor Offscreen is hidden #25628

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
3acc8db
Do not unmount layout effects if ancestor Offscreen is hidden
sammy-SC Nov 3, 2022
3d25d1b
Rename variable
sammy-SC Nov 3, 2022
eebfd29
yarn replace-fork
sammy-SC Nov 3, 2022
0a9d7c1
prettier
sammy-SC Nov 3, 2022
876b486
Correct comment
sammy-SC Nov 3, 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: 10 additions & 6 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 @@ -2869,7 +2869,6 @@ function commitMutationEffectsOnFiber(

if (flags & Visibility) {
const offscreenInstance: OffscreenInstance = finishedWork.stateNode;
const offscreenBoundary: Fiber = finishedWork;
Copy link
Contributor Author

Choose a reason for hiding this comment

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

This just renames variable. I removed it to align with surrounding code. Everything else uses offscreenBoundary.


// Track the current state on the Offscreen instance so we can
// read it during an event
Expand All @@ -2880,11 +2879,16 @@ function commitMutationEffectsOnFiber(
}

if (isHidden) {
// Check if this is an update, and the tree was previously visible.
if (current !== null && !wasHidden) {
if ((offscreenBoundary.mode & ConcurrentMode) !== NoMode) {
const isUpdate = current !== null;
const isAncestorOffscreenHidden = offscreenSubtreeIsHidden;
// Only trigger disapper layout effects if:
// - This is an update, not first mount.
// - This Offscreen was hidden before.
Copy link
Collaborator

Choose a reason for hiding this comment

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

Do you mean it wasn't hidden before?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yes, thanks for spotting it.

// - No ancestor Offscreen is hidden.
if (isUpdate && !wasHidden && !isAncestorOffscreenHidden) {
if ((finishedWork.mode & ConcurrentMode) !== NoMode) {
// Disappear the layout effects of all the children
recursivelyTraverseDisappearLayoutEffects(offscreenBoundary);
recursivelyTraverseDisappearLayoutEffects(finishedWork);
}
}
} else {
Expand All @@ -2897,7 +2901,7 @@ function commitMutationEffectsOnFiber(
if (supportsMutation && !isOffscreenManual(finishedWork)) {
// TODO: This needs to run whenever there's an insertion or update
// inside a hidden Offscreen tree.
hideOrUnhideAllChildren(offscreenBoundary, isHidden);
hideOrUnhideAllChildren(finishedWork, isHidden);
}
}

Expand Down
16 changes: 10 additions & 6 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 @@ -2869,7 +2869,6 @@ function commitMutationEffectsOnFiber(

if (flags & Visibility) {
const offscreenInstance: OffscreenInstance = finishedWork.stateNode;
const offscreenBoundary: Fiber = finishedWork;

// Track the current state on the Offscreen instance so we can
// read it during an event
Expand All @@ -2880,11 +2879,16 @@ function commitMutationEffectsOnFiber(
}

if (isHidden) {
// Check if this is an update, and the tree was previously visible.
if (current !== null && !wasHidden) {
if ((offscreenBoundary.mode & ConcurrentMode) !== NoMode) {
const isUpdate = current !== null;
const isAncestorOffscreenHidden = offscreenSubtreeIsHidden;
// Only trigger disapper layout effects if:
// - This is an update, not first mount.
// - This Offscreen was hidden before.
// - No ancestor Offscreen is hidden.
if (isUpdate && !wasHidden && !isAncestorOffscreenHidden) {
if ((finishedWork.mode & ConcurrentMode) !== NoMode) {
// Disappear the layout effects of all the children
recursivelyTraverseDisappearLayoutEffects(offscreenBoundary);
recursivelyTraverseDisappearLayoutEffects(finishedWork);
}
}
} else {
Expand All @@ -2897,7 +2901,7 @@ function commitMutationEffectsOnFiber(
if (supportsMutation && !isOffscreenManual(finishedWork)) {
// TODO: This needs to run whenever there's an insertion or update
// inside a hidden Offscreen tree.
hideOrUnhideAllChildren(offscreenBoundary, isHidden);
hideOrUnhideAllChildren(finishedWork, isHidden);
}
}

Expand Down
28 changes: 26 additions & 2 deletions packages/react-reconciler/src/__tests__/ReactOffscreen-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -281,13 +281,21 @@ describe('ReactOffscreen', () => {
componentWillUnmount() {
Scheduler.unstable_yieldValue('componentWillUnmount');
}

componentDidMount() {
Scheduler.unstable_yieldValue('componentDidMount');
}
}

let _setIsVisible;
let isFirstRender = true

function App() {
const [isVisible, setIsVisible] = React.useState(true);

if (isVisible === true) {
_setIsVisible = setIsVisible;
if (isFirstRender === true) {
setIsVisible(false);
isFirstRender = false;
}

return (
Expand All @@ -303,7 +311,23 @@ describe('ReactOffscreen', () => {
await act(async () => {
root.render(<App />);
});

expect(Scheduler).toHaveYielded(['Child']);
expect(root).toMatchRenderedOutput(<span hidden={true} prop="Child" />);

await act(async () => {
_setIsVisible(true);
});

expect(Scheduler).toHaveYielded(['Child']);
expect(root).toMatchRenderedOutput(<span hidden={true} prop="Child" />);

await act(async () => {
_setIsVisible(false);
});

expect(Scheduler).toHaveYielded(['Child']);
expect(root).toMatchRenderedOutput(<span hidden={true} prop="Child" />);
});

// @gate enableOffscreen
Expand Down