mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
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:
-4
@@ -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');
|
||||
|
||||
Reference in New Issue
Block a user