Setting transition pending flag shouldn't be part of a surrounding tr…

…ansition (#26243) Fixes #26226. (Is this the right fix?)
facebook · Mar 16, 2023 · 05777ff · 05777ff
1 parent 21f6dba
commit 05777ff
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 4 deletions.
diff --git a/packages/react-reconciler/src/ReactFiberHooks.js b/packages/react-reconciler/src/ReactFiberHooks.js
@@ -2389,11 +2389,11 @@ function startTransition(
     higherEventPriority(previousPriority, ContinuousEventPriority),
   );
 
-  setPending(true);
-
   const prevTransition = ReactCurrentBatchConfig.transition;
-  ReactCurrentBatchConfig.transition = ({}: BatchConfigTransition);
-  const currentTransition = ReactCurrentBatchConfig.transition;
+  ReactCurrentBatchConfig.transition = null;
+  setPending(true);
+  const currentTransition = (ReactCurrentBatchConfig.transition =
+    ({}: BatchConfigTransition));
 
   if (enableTransitionTracing) {
     if (options !== undefined && options.name !== undefined) {

diff --git a/packages/react-reconciler/src/__tests__/ReactTransition-test.js b/packages/react-reconciler/src/__tests__/ReactTransition-test.js
@@ -951,4 +951,43 @@ describe('ReactTransition', () => {
 
     expect(root).toMatchRenderedOutput('Transition pri: 1, Normal pri: 1');
   });
+
+  it('tracks two pending flags for nested startTransition (#26226)', async () => {
+    let update;
+    function App() {
+      const [isPendingA, startTransitionA] = useTransition();
+      const [isPendingB, startTransitionB] = useTransition();
+      const [state, setState] = useState(0);
+
+      update = function () {
+        startTransitionA(() => {
+          startTransitionB(() => {
+            setState(1);
+          });
+        });
+      };
+
+      return (
+        <>
+          <Text text={state} />
+          {', '}
+          <Text text={'A ' + isPendingA} />
+          {', '}
+          <Text text={'B ' + isPendingB} />
+        </>
+      );
+    }
+    const root = ReactNoop.createRoot();
+    await act(async () => {
+      root.render(<App />);
+    });
+    assertLog([0, 'A false', 'B false']);
+    expect(root).toMatchRenderedOutput('0, A false, B false');
+
+    await act(async () => {
+      update();
+    });
+    assertLog([0, 'A true', 'B true', 1, 'A false', 'B false']);
+    expect(root).toMatchRenderedOutput('1, A false, B false');
+  });
 });