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.

Author: acdlite

packages/react-reconciler/src/ReactFiberBeginWork.js

@@ -83,13 +83,7 @@ import {
   Never,
   computeAsyncExpiration,
 } from './ReactFiberExpirationTime';
-import {
-  ConcurrentMode,
-  NoMode,
-  ProfileMode,
-  StrictMode,
-  BatchedMode,
-} from './ReactTypeOfMode';
+import {NoMode, ProfileMode, StrictMode, BatchedMode} from './ReactTypeOfMode';
 import {
   shouldSetTextContent,
   shouldDeprioritizeSubtree,
@@ -974,7 +968,7 @@ function updateHostComponent(current, workInProgress, renderExpirationTime) {
   // Check the host config to see if the children are offscreen/hidden.
   if (
     renderExpirationTime !== Never &&
-    workInProgress.mode & ConcurrentMode &&
+    workInProgress.mode & BatchedMode &&
     shouldDeprioritizeSubtree(type, nextProps)
   ) {
     // Schedule this fiber to re-render at offscreen priority. Then bailout.

packages/react-reconciler/src/ReactFiberScheduler.js

@@ -62,6 +62,7 @@ import {
   BatchedMode,
   ConcurrentMode,
 } from './ReactTypeOfMode';
+import {ConcurrentRoot} from 'shared/ReactRootTags';
 import {
   HostRoot,
   ClassComponent,
@@ -728,6 +729,10 @@ function renderRoot(
     'Should not already be working.',
   );
 
+  if (root.tag !== ConcurrentRoot) {
+    isSync = true;
+  }
+
   if (enableUserTimingAPI && expirationTime !== Sync) {
     const didExpire = isSync;
     stopRequestCallbackTimer(didExpire);

packages/react-reconciler/src/__tests__/ReactBatchedMode-test.internal.js

@@ -163,4 +163,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>,
+    );
+  });
 });