Support hidden deprioritization in Batched Mode

Hidden trees will tear and commit in a separate render, as in Concurrent Mode. Unlike Concurrent Mode, once the hidden tree begins, it will finish without yielding.
facebook · May 23, 2019 · 62406b0 · 62406b0
1 parent 025b07b
commit 62406b0
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 8 deletions.
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.js b/packages/react-reconciler/src/ReactFiberBeginWork.js
@@ -84,13 +84,7 @@ import {
   Never,
   computeAsyncExpiration,
 } from './ReactFiberExpirationTime';
-import {
-  ConcurrentMode,
-  NoMode,
-  ProfileMode,
-  StrictMode,
-  BatchedMode,
-} from './ReactTypeOfMode';
+import {NoMode, ProfileMode, StrictMode, BatchedMode} from './ReactTypeOfMode';
 import {
   shouldSetTextContent,
   shouldDeprioritizeSubtree,
@@ -980,7 +974,7 @@ function updateHostComponent(current, workInProgress, renderExpirationTime) {
 
   // Check the host config to see if the children are offscreen/hidden.
   if (
-    workInProgress.mode & ConcurrentMode &&
+    workInProgress.mode & BatchedMode &&
     renderExpirationTime !== Never &&
     shouldDeprioritizeSubtree(type, nextProps)
   ) {

diff --git a/packages/react-reconciler/src/ReactFiberScheduler.js b/packages/react-reconciler/src/ReactFiberScheduler.js
@@ -64,6 +64,7 @@ import {
   BatchedMode,
   ConcurrentMode,
 } from './ReactTypeOfMode';
+import {ConcurrentRoot} from 'shared/ReactRootTags';
 import {
   HostRoot,
   ClassComponent,
@@ -776,6 +777,10 @@ function renderRoot(
     'Should not already be working.',
   );
 
+  if (root.tag !== ConcurrentRoot) {
+    isSync = true;
+  }
+
   if (enableUserTimingAPI && expirationTime !== Sync) {
     const didExpire = isSync;
     stopRequestCallbackTimer(didExpire);

diff --git a/packages/react-reconciler/src/__tests__/ReactBatchedMode-test.internal.js b/packages/react-reconciler/src/__tests__/ReactBatchedMode-test.internal.js
@@ -161,4 +161,46 @@ describe('ReactBatchedMode', () => {
     expect(Scheduler).toFlushExpired(['A1']);
     expect(root).toMatchRenderedOutput('A1B1');
   });
+
+  it('hidden subtrees are deprioritized but not yieldy', () => {
+    const {useEffect} = React;
+
+    const root = ReactNoop.createSyncRoot();
+    function App() {
+      useEffect(() => Scheduler.yieldValue('Commit'));
+      return (
+        <Suspense fallback={<Text text="Loading..." />}>
+          <div hidden={true}>
+            <Text text="A" />
+            <Text text="B" />
+            <Text text="C" />
+          </div>
+          <div>
+            <Text text="D" />
+            <Text text="E" />
+            <Text text="F" />
+          </div>
+        </Suspense>
+      );
+    }
+
+    root.render(<App />);
+    expect(Scheduler).toFlushAndYieldThrough(['D', 'E', 'F', 'Commit']);
+    expect(root).toMatchRenderedOutput(
+      <React.Fragment>
+        <div hidden={true} />
+        <div>DEF</div>
+      </React.Fragment>,
+    );
+
+    Scheduler.unstable_flushNumberOfYields(1);
+    expect(Scheduler).toHaveYielded(['A', 'B', 'C']);
+    Scheduler.flushAll();
+    expect(root).toMatchRenderedOutput(
+      <React.Fragment>
+        <div hidden={true}>ABC</div>
+        <div>DEF</div>
+      </React.Fragment>,
+    );
+  });
 });