Skip to content

Commit

Permalink
Setting transition pending flag shouldn't be part of a surrounding tr…
Browse files Browse the repository at this point in the history
…ansition

Fixes #26226. (Is this the right fix?)
  • Loading branch information
sophiebits committed Mar 16, 2023
1 parent 99aa082 commit 8f3c45b
Show file tree
Hide file tree
Showing 2 changed files with 43 additions and 4 deletions.
8 changes: 4 additions & 4 deletions packages/react-reconciler/src/ReactFiberHooks.js
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
39 changes: 39 additions & 0 deletions packages/react-reconciler/src/__tests__/ReactTransition-test.js
Original file line number Diff line number Diff line change
Expand Up @@ -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');
});
});

0 comments on commit 8f3c45b

Please sign in to comment.