Revert "Offscreen: Use JS stack to track hidden/unhidden subtree state" (#21194)
This reverts commit 1f8583de8c5e69f27a871a2069dcb5aecac02f40.
Brian Vaughn committed
Apr 7, 2021 at 17:51 UTC
e90c76a651a9889830f32256e2c2e2a408b713c5
2 files changed
+46
-56
packages/react-reconciler/src/ReactFiberCommitWork.new.js
+23
-28
@@ -156,7 +156,9 @@ if (__DEV__) {
156
// Allows us to avoid traversing the return path to find the nearest Offscreen ancestor.
157
// Only used when enableSuspenseLayoutEffectSemantics is enabled.
158
let offscreenSubtreeIsHidden: boolean = false;
159
+const offscreenSubtreeIsHiddenStack: Array<boolean> = [];
160
let offscreenSubtreeWasHidden: boolean = false;
161
+const offscreenSubtreeWasHiddenStack: Array<boolean> = [];
162
163
const PossiblyWeakSet = typeof WeakSet === 'function' ? WeakSet : Set;
164
@@ -2303,35 +2305,11 @@ function commitLayoutEffects_begin(
2305
const wasHidden = current !== null && current.memoizedState !== null;
2306
const isHidden = fiber.memoizedState !== null;
2307
2306
- const newOffscreenSubtreeIsHidden =
2307
- isHidden || offscreenSubtreeIsHidden;
2308
- const newOffscreenSubtreeWasHidden =
2309
- wasHidden || offscreenSubtreeWasHidden;
2308
+ offscreenSubtreeWasHidden = wasHidden || offscreenSubtreeWasHidden;
2309
+ offscreenSubtreeIsHidden = isHidden || offscreenSubtreeIsHidden;
2310
2311
- if (
2312
- newOffscreenSubtreeIsHidden !== offscreenSubtreeIsHidden ||
2313
- newOffscreenSubtreeWasHidden !== offscreenSubtreeWasHidden
2314
- ) {
2315
- const prevOffscreenSubtreeIsHidden = offscreenSubtreeIsHidden;
2316
- const prevOffscreenSubtreeWasHidden = offscreenSubtreeWasHidden;
2317
-
2318
- nextEffect = fiber;
2319
- offscreenSubtreeIsHidden = newOffscreenSubtreeIsHidden;
2320
- offscreenSubtreeWasHidden = newOffscreenSubtreeWasHidden;
2321
-
2322
- // Traverse the Offscreen subtree with the current Offscreen as the root.
2323
- commitLayoutEffects_begin(
2324
- fiber, // New root; bubble back up to here and stop.
2325
- root,
2326
- committedLanes,
2327
- );
2328
-
2329
- nextEffect = fiber.sibling;
2330
- offscreenSubtreeIsHidden = prevOffscreenSubtreeIsHidden;
2331
- offscreenSubtreeWasHidden = prevOffscreenSubtreeWasHidden;
2332
-
2333
- continue;
2334
- }
2311
+ offscreenSubtreeWasHiddenStack.push(wasHidden);
2312
+ offscreenSubtreeIsHiddenStack.push(isHidden);
2313
}
2314
}
2315
@@ -2372,6 +2350,23 @@ function commitLayoutMountEffects_complete(
2350
while (nextEffect !== null) {
2351
const fiber = nextEffect;
2352
2353
+ if (enableSuspenseLayoutEffectSemantics && isModernRoot) {
2354
+ if (fiber.tag === OffscreenComponent) {
2355
+ offscreenSubtreeWasHiddenStack.pop();
2356
+ offscreenSubtreeIsHiddenStack.pop();
2357
+ offscreenSubtreeWasHidden =
2358
+ offscreenSubtreeWasHiddenStack.length > 0 &&
2359
+ offscreenSubtreeWasHiddenStack[
2360
+ offscreenSubtreeWasHiddenStack.length - 1
2361
+ ];
2362
+ offscreenSubtreeIsHidden =
2363
+ offscreenSubtreeIsHiddenStack.length > 0 &&
2364
+ offscreenSubtreeIsHiddenStack[
2365
+ offscreenSubtreeIsHiddenStack.length - 1
2366
+ ];
2367
+ }
2368
+ }
2369
+
2370
if (
2371
enableSuspenseLayoutEffectSemantics &&
2372
isModernRoot &&
packages/react-reconciler/src/ReactFiberCommitWork.old.js
+23
-28
@@ -156,7 +156,9 @@ if (__DEV__) {
156
// Allows us to avoid traversing the return path to find the nearest Offscreen ancestor.
157
// Only used when enableSuspenseLayoutEffectSemantics is enabled.
158
let offscreenSubtreeIsHidden: boolean = false;
159
+const offscreenSubtreeIsHiddenStack: Array<boolean> = [];
160
let offscreenSubtreeWasHidden: boolean = false;
161
+const offscreenSubtreeWasHiddenStack: Array<boolean> = [];
162
163
const PossiblyWeakSet = typeof WeakSet === 'function' ? WeakSet : Set;
164
@@ -2303,35 +2305,11 @@ function commitLayoutEffects_begin(
2305
const wasHidden = current !== null && current.memoizedState !== null;
2306
const isHidden = fiber.memoizedState !== null;
2307
2306
- const newOffscreenSubtreeIsHidden =
2307
- isHidden || offscreenSubtreeIsHidden;
2308
- const newOffscreenSubtreeWasHidden =
2309
- wasHidden || offscreenSubtreeWasHidden;
2308
+ offscreenSubtreeWasHidden = wasHidden || offscreenSubtreeWasHidden;
2309
+ offscreenSubtreeIsHidden = isHidden || offscreenSubtreeIsHidden;
2310
2311
- if (
2312
- newOffscreenSubtreeIsHidden !== offscreenSubtreeIsHidden ||
2313
- newOffscreenSubtreeWasHidden !== offscreenSubtreeWasHidden
2314
- ) {
2315
- const prevOffscreenSubtreeIsHidden = offscreenSubtreeIsHidden;
2316
- const prevOffscreenSubtreeWasHidden = offscreenSubtreeWasHidden;
2317
-
2318
- nextEffect = fiber;
2319
- offscreenSubtreeIsHidden = newOffscreenSubtreeIsHidden;
2320
- offscreenSubtreeWasHidden = newOffscreenSubtreeWasHidden;
2321
-
2322
- // Traverse the Offscreen subtree with the current Offscreen as the root.
2323
- commitLayoutEffects_begin(
2324
- fiber, // New root; bubble back up to here and stop.
2325
- root,
2326
- committedLanes,
2327
- );
2328
-
2329
- nextEffect = fiber.sibling;
2330
- offscreenSubtreeIsHidden = prevOffscreenSubtreeIsHidden;
2331
- offscreenSubtreeWasHidden = prevOffscreenSubtreeWasHidden;
2332
-
2333
- continue;
2334
- }
2311
+ offscreenSubtreeWasHiddenStack.push(wasHidden);
2312
+ offscreenSubtreeIsHiddenStack.push(isHidden);
2313
}
2314
}
2315
@@ -2372,6 +2350,23 @@ function commitLayoutMountEffects_complete(
2350
while (nextEffect !== null) {
2351
const fiber = nextEffect;
2352
2353
+ if (enableSuspenseLayoutEffectSemantics && isModernRoot) {
2354
+ if (fiber.tag === OffscreenComponent) {
2355
+ offscreenSubtreeWasHiddenStack.pop();
2356
+ offscreenSubtreeIsHiddenStack.pop();
2357
+ offscreenSubtreeWasHidden =
2358
+ offscreenSubtreeWasHiddenStack.length > 0 &&
2359
+ offscreenSubtreeWasHiddenStack[
2360
+ offscreenSubtreeWasHiddenStack.length - 1
2361
+ ];
2362
+ offscreenSubtreeIsHidden =
2363
+ offscreenSubtreeIsHiddenStack.length > 0 &&
2364
+ offscreenSubtreeIsHiddenStack[
2365
+ offscreenSubtreeIsHiddenStack.length - 1
2366
+ ];
2367
+ }
2368
+ }
2369
+
2370
if (
2371
enableSuspenseLayoutEffectSemantics &&
2372
isModernRoot &&