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

…ansition Fixes facebook#26226. (Is this the right fix?)
sophiebits · Feb 25, 2023 · 362a4f2 · 362a4f2
1 parent 5641660
commit 362a4f2
Show file tree

Hide file tree

Showing 2 changed files with 50 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
@@ -959,4 +959,50 @@ 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 />);
+    });
+    expect(Scheduler).toHaveYielded([0, 'A false', 'B false']);
+    expect(root).toMatchRenderedOutput('0, A false, B false');
+
+    await act(async () => {
+      update();
+    });
+    expect(Scheduler).toHaveYielded([
+      0,
+      'A true',
+      'B true',
+      1,
+      'A false',
+      'B false',
+    ]);
+    expect(root).toMatchRenderedOutput('1, A false, B false');
+  });
 });