Fix disableStrictPassiveEffect not working under Suspense (#26989)

In https://github.com/facebook/react/pull/26914 I added an extra logic
to turn off double useEffect if there is an `Offscreen`
tag. But `Suspense` uses `Offscreen` tag internally and that turns off
`disableStrictPassiveEffect` for everything.
This commit is contained in:
Tianyu Yao
2023-06-22 13:12:30 -07:00
committed by GitHub
parent c8deb5db66
commit 70e998a106
3 changed files with 26 additions and 8 deletions
-4
View File
@@ -760,10 +760,6 @@ export function createFiberFromOffscreen(
lanes: Lanes,
key: null | string,
): Fiber {
if (__DEV__) {
// StrictMode in Offscreen should always run double passive effects
mode &= ~NoStrictPassiveEffectsMode;
}
const fiber = createFiber(OffscreenComponent, pendingProps, key, mode);
fiber.elementType = REACT_OFFSCREEN_TYPE;
fiber.lanes = lanes;
@@ -55,8 +55,8 @@ describe('ReactOffscreenStrictMode', () => {
]);
});
// @gate __DEV__ && enableOffscreen
it('should trigger strict effects when disableStrictPassiveEffect is presented on StrictMode', async () => {
// @gate __DEV__ && enableOffscreen && enableDO_NOT_USE_disableStrictPassiveEffect
it('does not trigger strict effects when disableStrictPassiveEffect is presented on StrictMode', async () => {
await act(() => {
ReactNoop.render(
<React.StrictMode DO_NOT_USE_disableStrictPassiveEffect={true}>
@@ -73,9 +73,7 @@ describe('ReactOffscreenStrictMode', () => {
'A: useLayoutEffect mount',
'A: useEffect mount',
'A: useLayoutEffect unmount',
'A: useEffect unmount',
'A: useLayoutEffect mount',
'A: useEffect mount',
]);
});
@@ -126,6 +126,30 @@ describe('ReactStrictMode', () => {
]);
});
// @gate enableDO_NOT_USE_disableStrictPassiveEffect
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',
]);
});
it('should allow level to be increased with nesting', async () => {
await act(() => {
const container = document.createElement('div');