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.
Tianyu Yao committed
Jun 22, 2023 at 13:12 UTC
70e998a1064cc1e8e8f9103e0c00d37fbbcf71c1
3 files changed
+26
-8
packages/react-reconciler/src/ReactFiber.js
-4
@@ -760,10 +760,6 @@ export function createFiberFromOffscreen(
760
lanes: Lanes,
761
key: null | string,
762
): Fiber {
763
- if (__DEV__) {
764
- // StrictMode in Offscreen should always run double passive effects
765
- mode &= ~NoStrictPassiveEffectsMode;
766
- }
763
const fiber = createFiber(OffscreenComponent, pendingProps, key, mode);
764
fiber.elementType = REACT_OFFSCREEN_TYPE;
765
fiber.lanes = lanes;
packages/react-reconciler/src/__tests__/ReactOffscreenStrictMode-test.js
+2
-4
@@ -55,8 +55,8 @@ describe('ReactOffscreenStrictMode', () => {
55
]);
56
});
57
58
- // @gate __DEV__ && enableOffscreen
59
- it('should trigger strict effects when disableStrictPassiveEffect is presented on StrictMode', async () => {
58
+ // @gate __DEV__ && enableOffscreen && enableDO_NOT_USE_disableStrictPassiveEffect
59
+ it('does not trigger strict effects when disableStrictPassiveEffect is presented on StrictMode', async () => {
60
await act(() => {
61
ReactNoop.render(
62
<React.StrictMode DO_NOT_USE_disableStrictPassiveEffect={true}>
@@ -73,9 +73,7 @@ describe('ReactOffscreenStrictMode', () => {
73
'A: useLayoutEffect mount',
74
'A: useEffect mount',
75
'A: useLayoutEffect unmount',
76
- 'A: useEffect unmount',
76
'A: useLayoutEffect mount',
78
- 'A: useEffect mount',
77
]);
78
});
79
packages/react/src/__tests__/ReactStrictMode-test.internal.js
+24
@@ -126,6 +126,30 @@ describe('ReactStrictMode', () => {
126
]);
127
});
128
129
+ // @gate enableDO_NOT_USE_disableStrictPassiveEffect
130
+ it('should include legacy + strict effects mode, but not strict passive effect with disableStrictPassiveEffect in Suspense', async () => {
131
+ await act(() => {
132
+ const container = document.createElement('div');
133
+ const root = ReactDOMClient.createRoot(container);
134
+ root.render(
135
+ <React.StrictMode DO_NOT_USE_disableStrictPassiveEffect={true}>
136
+ <React.Suspense>
137
+ <Component label="A" />
138
+ </React.Suspense>
139
+ </React.StrictMode>,
140
+ );
141
+ });
142
+
143
+ expect(log).toEqual([
144
+ 'A: render',
145
+ 'A: render',
146
+ 'A: useLayoutEffect mount',
147
+ 'A: useEffect mount',
148
+ 'A: useLayoutEffect unmount',
149
+ 'A: useLayoutEffect mount',
150
+ ]);
151
+ });
152
+
153
it('should allow level to be increased with nesting', async () => {
154
await act(() => {
155
const container = document.createElement('div');