Skip to content

Bubble passive+static subtreeTag even if we bailout #19750

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

Merged
merged 2 commits into from
Sep 2, 2020
Merged

Bubble passive+static subtreeTag even if we bailout #19750

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
dc28f00
Add failing tests for passive effects cleanup not being called for me…
Sep 2, 2020
b24aae9
Bubble passive static subtreeTag even after bailout
Sep 2, 2020
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
18 changes: 18 additions & 0 deletions packages/react-reconciler/src/ReactFiberWorkLoop.new.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1904,6 +1904,14 @@ function resetChildLanes(completedWork: Fiber) {
mergeLanes(child.lanes, child.childLanes),
);

// Preserve passive static flag even in the case of a bailout;
// otherwise a subsequent unmount may bailout before calling destroy functions.
subtreeTag |= child.subtreeTag & PassiveStaticSubtreeTag;
const effectTag = child.effectTag;
if ((effectTag & PassiveStatic) !== NoEffect) {
subtreeTag |= PassiveStaticSubtreeTag;
}

treeBaseDuration += child.treeBaseDuration;
child = child.sibling;
}
Expand All @@ -1928,9 +1936,19 @@ function resetChildLanes(completedWork: Fiber) {
mergeLanes(child.lanes, child.childLanes),
);

// Preserve passive static flag even in the case of a bailout;
// otherwise a subsequent unmount may bailout before calling destroy functions.
subtreeTag |= child.subtreeTag & PassiveStaticSubtreeTag;
const effectTag = child.effectTag;
if ((effectTag & PassiveStatic) !== NoEffect) {
subtreeTag |= PassiveStaticSubtreeTag;
}

child = child.sibling;
}
}

completedWork.subtreeTag |= subtreeTag;
}

completedWork.childLanes = newChildLanes;
Expand Down
138 changes: 138 additions & 0 deletions packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2734,6 +2734,144 @@ describe('ReactHooksWithNoopRenderer', () => {
expect(ReactNoop.getChildren()).toEqual([]);
});
});

it('calls passive effect destroy functions for memoized components', () => {
const Wrapper = ({children}) => children;
function Child() {
React.useEffect(() => {
Scheduler.unstable_yieldValue('passive create');
return () => {
Scheduler.unstable_yieldValue('passive destroy');
};
}, []);
React.useLayoutEffect(() => {
Scheduler.unstable_yieldValue('layout create');
return () => {
Scheduler.unstable_yieldValue('layout destroy');
};
}, []);
Scheduler.unstable_yieldValue('render');
return null;
}

const isEqual = (prevProps, nextProps) =>
prevProps.prop === nextProps.prop;
const MemoizedChild = React.memo(Child, isEqual);

act(() => {
ReactNoop.render(
<Wrapper>
<MemoizedChild key={1} />
</Wrapper>,
);
});
expect(Scheduler).toHaveYielded([
'render',
'layout create',
'passive create',
]);

// Include at least one no-op (memoized) update to trigger original bug.
act(() => {
ReactNoop.render(
<Wrapper>
<MemoizedChild key={1} />
</Wrapper>,
);
});
expect(Scheduler).toHaveYielded([]);

act(() => {
ReactNoop.render(
<Wrapper>
<MemoizedChild key={2} />
</Wrapper>,
);
});
expect(Scheduler).toHaveYielded([
'render',
'layout destroy',
'layout create',
'passive destroy',
'passive create',
]);

act(() => {
ReactNoop.render(null);
});
expect(Scheduler).toHaveYielded(['layout destroy', 'passive destroy']);
});

it('calls passive effect destroy functions for descendants of memoized components', () => {
const Wrapper = ({children}) => children;
function Child() {
return <Grandchild />;
}

function Grandchild() {
React.useEffect(() => {
Scheduler.unstable_yieldValue('passive create');
return () => {
Scheduler.unstable_yieldValue('passive destroy');
};
}, []);
React.useLayoutEffect(() => {
Scheduler.unstable_yieldValue('layout create');
return () => {
Scheduler.unstable_yieldValue('layout destroy');
};
}, []);
Scheduler.unstable_yieldValue('render');
return null;
}

const isEqual = (prevProps, nextProps) =>
prevProps.prop === nextProps.prop;
const MemoizedChild = React.memo(Child, isEqual);

act(() => {
ReactNoop.render(
<Wrapper>
<MemoizedChild key={1} />
</Wrapper>,
);
});
expect(Scheduler).toHaveYielded([
'render',
'layout create',
'passive create',
]);

// Include at least one no-op (memoized) update to trigger original bug.
act(() => {
ReactNoop.render(
<Wrapper>
<MemoizedChild key={1} />
</Wrapper>,
);
});
expect(Scheduler).toHaveYielded([]);

act(() => {
ReactNoop.render(
<Wrapper>
<MemoizedChild key={2} />
</Wrapper>,
);
});
expect(Scheduler).toHaveYielded([
'render',
'layout destroy',
'layout create',
'passive destroy',
'passive create',
]);

act(() => {
ReactNoop.render(null);
});
expect(Scheduler).toHaveYielded(['layout destroy', 'passive destroy']);
});
});

describe('useLayoutEffect', () => {
Expand Down