Add React.startTransition

packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js

@@ -2320,7 +2320,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     };
 
     // @gate experimental
-    it('top level render', async () => {
+    it('top level render using withSuspenseConfig', async () => {
       function App({page}) {
         return (
           <Suspense fallback={<Text text="Loading..." />}>
@@ -2374,6 +2374,55 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       expect(ReactNoop.getChildren()).toEqual([span('B')]);
     });
 
+    // @gate experimental
+    it('top level render using React.startTransition', async () => {
+      function App({page}) {
+        return (
+          <Suspense fallback={<Text text="Loading..." />}>
+            <AsyncText text={page} ms={5000} />
+          </Suspense>
+        );
+      }
+
+      // Initial render.
+      React.unstable_startTransition(() => ReactNoop.render(<App page="A" />));
+
+      expect(Scheduler).toFlushAndYield(['Suspend! [A]', 'Loading...']);
+      // Only a short time is needed to unsuspend the initial loading state.
+      Scheduler.unstable_advanceTime(400);
+      await advanceTimers(400);
+      expect(ReactNoop.getChildren()).toEqual([span('Loading...')]);
+
+      // Later we load the data.
+      Scheduler.unstable_advanceTime(5000);
+      await advanceTimers(5000);
+      expect(Scheduler).toHaveYielded(['Promise resolved [A]']);
+      expect(Scheduler).toFlushAndYield(['A']);
+      expect(ReactNoop.getChildren()).toEqual([span('A')]);
+
+      // Start transition.
+      React.unstable_startTransition(() => ReactNoop.render(<App page="B" />));
+
+      expect(Scheduler).toFlushAndYield(['Suspend! [B]', 'Loading...']);
+      Scheduler.unstable_advanceTime(1000);
+      await advanceTimers(1000);
+      // Even after a second, we have still not yet flushed the loading state.
+      expect(ReactNoop.getChildren()).toEqual([span('A')]);
+      Scheduler.unstable_advanceTime(11000);
+      await advanceTimers(11000);
+      // After the timeout, we do show the loading state.
+      expect(ReactNoop.getChildren()).toEqual([
+        hiddenSpan('A'),
+        span('Loading...'),
+      ]);
+      // Later we load the data.
+      Scheduler.unstable_advanceTime(3000);
+      await advanceTimers(3000);
+      expect(Scheduler).toHaveYielded(['Promise resolved [B]']);
+      expect(Scheduler).toFlushAndYield(['B']);
+      expect(ReactNoop.getChildren()).toEqual([span('B')]);
+    });
+
     // @gate experimental
     it('hooks', async () => {
       let transitionToPage;

packages/react/index.classic.fb.js

@@ -46,6 +46,8 @@ export {
   useTransition as unstable_useTransition,
   useDeferredValue,
   useDeferredValue as unstable_useDeferredValue,
+  startTransition,
+  startTransition as unstable_startTransition,
   SuspenseList,
   SuspenseList as unstable_SuspenseList,
   unstable_withSuspenseConfig,

packages/react/index.experimental.js

@@ -42,6 +42,7 @@ export {
   // exposeConcurrentModeAPIs
   useTransition as unstable_useTransition,
   useDeferredValue as unstable_useDeferredValue,
+  startTransition as unstable_startTransition,
   SuspenseList as unstable_SuspenseList,
   unstable_withSuspenseConfig,
   // enableBlocksAPI

packages/react/index.js

@@ -72,6 +72,7 @@ export {
   createFactory,
   useTransition,
   useTransition as unstable_useTransition,
+  startTransition as unstable_startTransition,
   useDeferredValue,
   useDeferredValue as unstable_useDeferredValue,
   SuspenseList,

packages/react/index.modern.fb.js

@@ -45,6 +45,8 @@ export {
   useTransition as unstable_useTransition,
   useDeferredValue,
   useDeferredValue as unstable_useDeferredValue,
+  startTransition,
+  startTransition as unstable_startTransition,
   SuspenseList,
   SuspenseList as unstable_SuspenseList,
   unstable_withSuspenseConfig,

packages/react/src/React.js

@@ -58,6 +58,7 @@ import {
 import {createMutableSource} from './ReactMutableSource';
 import ReactSharedInternals from './ReactSharedInternals';
 import {createFundamental} from './ReactFundamental';
+import {startTransition} from './ReactStartTransition';
 
 // TODO: Move this branching into the other module instead and just re-export.
 const createElement = __DEV__ ? createElementWithValidation : createElementProd;
@@ -107,6 +108,7 @@ export {
   createFactory,
   // Concurrent Mode
   useTransition,
+  startTransition,
   useDeferredValue,
   REACT_SUSPENSE_LIST_TYPE as SuspenseList,
   REACT_LEGACY_HIDDEN_TYPE as unstable_LegacyHidden,

packages/react/src/ReactStartTransition.js

@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import ReactCurrentBatchConfig from './ReactCurrentBatchConfig';
+
+// Default to an arbitrarily large timeout. Effectively, this is infinite. The
+// eventual goal is to never timeout when refreshing already visible content.
+const IndefiniteTimeoutConfig = {timeoutMs: 100000};
+
+export function startTransition(scope: () => void) {
+  const previousConfig = ReactCurrentBatchConfig.suspense;
+  ReactCurrentBatchConfig.suspense = IndefiniteTimeoutConfig;
+  try {
+    scope();
+  } finally {
+    ReactCurrentBatchConfig.suspense = previousConfig;
+  }
+}