Skip to content

Make temporary NoStrictPassiveEffects option work with useModernStrictMode #27105

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 1 commit into from
Jul 18, 2023
Merged

Make temporary NoStrictPassiveEffects option work with useModernStrictMode #27105

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
21 changes: 17 additions & 4 deletions packages/react-reconciler/src/ReactFiberWorkLoop.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,6 +90,7 @@ import {
ConcurrentMode,
StrictLegacyMode,
StrictEffectsMode,
NoStrictPassiveEffectsMode,
} from './ReactTypeOfMode';
import {
HostRoot,
Expand Down Expand Up @@ -3538,11 +3539,19 @@ function recursivelyTraverseAndDoubleInvokeEffectsInDEV(
}

// Unconditionally disconnects and connects passive and layout effects.
function doubleInvokeEffectsOnFiber(root: FiberRoot, fiber: Fiber) {
function doubleInvokeEffectsOnFiber(
root: FiberRoot,
fiber: Fiber,
shouldDoubleInvokePassiveEffects: boolean = true,
) {
disappearLayoutEffects(fiber);
disconnectPassiveEffect(fiber);
if (shouldDoubleInvokePassiveEffects) {
disconnectPassiveEffect(fiber);
}
reappearLayoutEffects(root, fiber.alternate, fiber, false);
reconnectPassiveEffects(root, fiber, NoLanes, null, false);
if (shouldDoubleInvokePassiveEffects) {
reconnectPassiveEffects(root, fiber, NoLanes, null, false);
}
}

function doubleInvokeEffectsInDEVIfNecessary(
Expand All @@ -3559,7 +3568,11 @@ function doubleInvokeEffectsInDEVIfNecessary(
if (fiber.flags & PlacementDEV) {
setCurrentDebugFiberInDEV(fiber);
if (isInStrictMode) {
doubleInvokeEffectsOnFiber(root, fiber);
doubleInvokeEffectsOnFiber(
root,
fiber,
(fiber.mode & NoStrictPassiveEffectsMode) === NoMode,
Copy link
Contributor

Choose a reason for hiding this comment

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

should the mode be passed down below on L3597 as well?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Good question. I checked the test case where a Suspense boundary is used

react/packages/react/src/__tests__/ReactStrictMode-test.internal.js

Lines 130 to 150 in 546fe46

it('should include legacy + strict effects mode, but not strict passive effect with disableStrictPassiveEffect in Suspense', async () => {
await act(() => {
const container = document.createElement('div');
const root = ReactDOMClient.createRoot(container);
root.render(
<React.StrictMode DO_NOT_USE_disableStrictPassiveEffect={true}>
<React.Suspense>
<Component label="A" />
</React.Suspense>
</React.StrictMode>,
);
});
expect(log).toEqual([
'A: render',
'A: render',
'A: useLayoutEffect mount',
'A: useEffect mount',
'A: useLayoutEffect unmount',
'A: useLayoutEffect mount',
]);

and the codepath on L3597 doesn't hit. So no, we don't need this flag for components under a real Offscreen component.

);
}
resetCurrentDebugFiberInDEV();
} else {
Expand Down