Revert "Support nesting of startTransition and flushSync (alt) (#21149)"
This reverts commit faa1e127f1ba755da846bc6ce299cdefaf97721f. * Support nesting of startTransition and flushSync * Unset transition before entering any special execution contexts Co-authored-by: Andrew Clark <git@andrewclark.io>
Andrew Clark committed
Apr 23, 2021 at 11:44 UTC
207d4c3a535d4624f17634baa6bfe613f5f3e4e6
4 files changed
-93
packages/react-dom/src/events/ReactDOMEventListener.js
-6
@@ -49,9 +49,6 @@ import {
49
getCurrentUpdatePriority,
50
setCurrentUpdatePriority,
51
} from 'react-reconciler/src/ReactEventPriorities';
52
-import ReactSharedInternals from 'shared/ReactSharedInternals';
53
-
54
-const {ReactCurrentBatchConfig} = ReactSharedInternals;
52
53
// TODO: can we stop exporting these?
54
export let _enabled = true;
@@ -128,14 +125,11 @@ function dispatchContinuousEvent(
125
nativeEvent,
126
) {
127
const previousPriority = getCurrentUpdatePriority();
131
- const prevTransition = ReactCurrentBatchConfig.transition;
132
- ReactCurrentBatchConfig.transition = 0;
128
try {
129
setCurrentUpdatePriority(ContinuousEventPriority);
130
dispatchEvent(domEventName, eventSystemFlags, container, nativeEvent);
131
} finally {
132
setCurrentUpdatePriority(previousPriority);
138
- ReactCurrentBatchConfig.transition = prevTransition;
133
}
134
}
135
packages/react-reconciler/src/ReactFiberWorkLoop.new.js
-22
@@ -245,7 +245,6 @@ const ceil = Math.ceil;
245
const {
246
ReactCurrentDispatcher,
247
ReactCurrentOwner,
248
- ReactCurrentBatchConfig,
248
IsSomeRendererActing,
249
} = ReactSharedInternals;
250
@@ -1063,14 +1062,11 @@ export function flushDiscreteUpdates() {
1062
1063
export function deferredUpdates<A>(fn: () => A): A {
1064
const previousPriority = getCurrentUpdatePriority();
1066
- const prevTransition = ReactCurrentBatchConfig.transition;
1065
try {
1068
- ReactCurrentBatchConfig.transition = 0;
1066
setCurrentUpdatePriority(DefaultEventPriority);
1067
return fn();
1068
} finally {
1069
setCurrentUpdatePriority(previousPriority);
1073
- ReactCurrentBatchConfig.transition = prevTransition;
1070
}
1071
}
1072
@@ -1114,14 +1110,11 @@ export function discreteUpdates<A, B, C, D, R>(
1110
d: D,
1111
): R {
1112
const previousPriority = getCurrentUpdatePriority();
1117
- const prevTransition = ReactCurrentBatchConfig.transition;
1113
try {
1119
- ReactCurrentBatchConfig.transition = 0;
1114
setCurrentUpdatePriority(DiscreteEventPriority);
1115
return fn(a, b, c, d);
1116
} finally {
1117
setCurrentUpdatePriority(previousPriority);
1124
- ReactCurrentBatchConfig.transition = prevTransition;
1118
if (executionContext === NoContext) {
1119
resetRenderTimer();
1120
}
@@ -1151,10 +1144,8 @@ export function flushSync<A, R>(fn: A => R, a: A): R {
1144
const prevExecutionContext = executionContext;
1145
executionContext |= BatchedContext;
1146
1154
- const prevTransition = ReactCurrentBatchConfig.transition;
1147
const previousPriority = getCurrentUpdatePriority();
1148
try {
1157
- ReactCurrentBatchConfig.transition = 0;
1149
setCurrentUpdatePriority(DiscreteEventPriority);
1150
if (fn) {
1151
return fn(a);
@@ -1163,7 +1154,6 @@ export function flushSync<A, R>(fn: A => R, a: A): R {
1154
}
1155
} finally {
1156
setCurrentUpdatePriority(previousPriority);
1166
- ReactCurrentBatchConfig.transition = prevTransition;
1157
executionContext = prevExecutionContext;
1158
// Flush the immediate callbacks that were scheduled during this batch.
1159
// Note that this will happen even if batchedUpdates is higher up
@@ -1185,15 +1175,12 @@ export function flushSync<A, R>(fn: A => R, a: A): R {
1175
export function flushControlled(fn: () => mixed): void {
1176
const prevExecutionContext = executionContext;
1177
executionContext |= BatchedContext;
1188
- const prevTransition = ReactCurrentBatchConfig.transition;
1178
const previousPriority = getCurrentUpdatePriority();
1179
try {
1191
- ReactCurrentBatchConfig.transition = 0;
1180
setCurrentUpdatePriority(DiscreteEventPriority);
1181
fn();
1182
} finally {
1183
setCurrentUpdatePriority(previousPriority);
1196
- ReactCurrentBatchConfig.transition = prevTransition;
1184
1185
executionContext = prevExecutionContext;
1186
if (executionContext === NoContext) {
@@ -1688,13 +1675,10 @@ function commitRoot(root) {
1675
// TODO: This no longer makes any sense. We already wrap the mutation and
1676
// layout phases. Should be able to remove.
1677
const previousUpdateLanePriority = getCurrentUpdatePriority();
1691
- const prevTransition = ReactCurrentBatchConfig.transition;
1678
try {
1693
- ReactCurrentBatchConfig.transition = 0;
1679
setCurrentUpdatePriority(DiscreteEventPriority);
1680
commitRootImpl(root, previousUpdateLanePriority);
1681
} finally {
1697
- ReactCurrentBatchConfig.transition = prevTransition;
1682
setCurrentUpdatePriority(previousUpdateLanePriority);
1683
}
1684
@@ -1816,8 +1800,6 @@ function commitRootImpl(root, renderPriorityLevel) {
1800
NoFlags;
1801
1802
if (subtreeHasEffects || rootHasEffect) {
1819
- const prevTransition = ReactCurrentBatchConfig.transition;
1820
- ReactCurrentBatchConfig.transition = 0;
1803
const previousPriority = getCurrentUpdatePriority();
1804
setCurrentUpdatePriority(DiscreteEventPriority);
1805
@@ -1899,7 +1881,6 @@ function commitRootImpl(root, renderPriorityLevel) {
1881
1882
// Reset the priority to the previous non-sync value.
1883
setCurrentUpdatePriority(previousPriority);
1902
- ReactCurrentBatchConfig.transition = prevTransition;
1884
} else {
1885
// No effects.
1886
root.current = finishedWork;
@@ -2036,15 +2017,12 @@ export function flushPassiveEffects(): boolean {
2017
if (rootWithPendingPassiveEffects !== null) {
2018
const renderPriority = lanesToEventPriority(pendingPassiveEffectsLanes);
2019
const priority = lowerEventPriority(DefaultEventPriority, renderPriority);
2039
- const prevTransition = ReactCurrentBatchConfig.transition;
2020
const previousPriority = getCurrentUpdatePriority();
2021
try {
2042
- ReactCurrentBatchConfig.transition = 0;
2022
setCurrentUpdatePriority(priority);
2023
return flushPassiveEffectsImpl();
2024
} finally {
2025
setCurrentUpdatePriority(previousPriority);
2047
- ReactCurrentBatchConfig.transition = prevTransition;
2026
}
2027
}
2028
return false;
packages/react-reconciler/src/ReactFiberWorkLoop.old.js
-22
@@ -245,7 +245,6 @@ const ceil = Math.ceil;
245
const {
246
ReactCurrentDispatcher,
247
ReactCurrentOwner,
248
- ReactCurrentBatchConfig,
248
IsSomeRendererActing,
249
} = ReactSharedInternals;
250
@@ -1063,14 +1062,11 @@ export function flushDiscreteUpdates() {
1062
1063
export function deferredUpdates<A>(fn: () => A): A {
1064
const previousPriority = getCurrentUpdatePriority();
1066
- const prevTransition = ReactCurrentBatchConfig.transition;
1065
try {
1068
- ReactCurrentBatchConfig.transition = 0;
1066
setCurrentUpdatePriority(DefaultEventPriority);
1067
return fn();
1068
} finally {
1069
setCurrentUpdatePriority(previousPriority);
1073
- ReactCurrentBatchConfig.transition = prevTransition;
1070
}
1071
}
1072
@@ -1114,14 +1110,11 @@ export function discreteUpdates<A, B, C, D, R>(
1110
d: D,
1111
): R {
1112
const previousPriority = getCurrentUpdatePriority();
1117
- const prevTransition = ReactCurrentBatchConfig.transition;
1113
try {
1119
- ReactCurrentBatchConfig.transition = 0;
1114
setCurrentUpdatePriority(DiscreteEventPriority);
1115
return fn(a, b, c, d);
1116
} finally {
1117
setCurrentUpdatePriority(previousPriority);
1124
- ReactCurrentBatchConfig.transition = prevTransition;
1118
if (executionContext === NoContext) {
1119
resetRenderTimer();
1120
}
@@ -1151,10 +1144,8 @@ export function flushSync<A, R>(fn: A => R, a: A): R {
1144
const prevExecutionContext = executionContext;
1145
executionContext |= BatchedContext;
1146
1154
- const prevTransition = ReactCurrentBatchConfig.transition;
1147
const previousPriority = getCurrentUpdatePriority();
1148
try {
1157
- ReactCurrentBatchConfig.transition = 0;
1149
setCurrentUpdatePriority(DiscreteEventPriority);
1150
if (fn) {
1151
return fn(a);
@@ -1163,7 +1154,6 @@ export function flushSync<A, R>(fn: A => R, a: A): R {
1154
}
1155
} finally {
1156
setCurrentUpdatePriority(previousPriority);
1166
- ReactCurrentBatchConfig.transition = prevTransition;
1157
executionContext = prevExecutionContext;
1158
// Flush the immediate callbacks that were scheduled during this batch.
1159
// Note that this will happen even if batchedUpdates is higher up
@@ -1185,15 +1175,12 @@ export function flushSync<A, R>(fn: A => R, a: A): R {
1175
export function flushControlled(fn: () => mixed): void {
1176
const prevExecutionContext = executionContext;
1177
executionContext |= BatchedContext;
1188
- const prevTransition = ReactCurrentBatchConfig.transition;
1178
const previousPriority = getCurrentUpdatePriority();
1179
try {
1191
- ReactCurrentBatchConfig.transition = 0;
1180
setCurrentUpdatePriority(DiscreteEventPriority);
1181
fn();
1182
} finally {
1183
setCurrentUpdatePriority(previousPriority);
1196
- ReactCurrentBatchConfig.transition = prevTransition;
1184
1185
executionContext = prevExecutionContext;
1186
if (executionContext === NoContext) {
@@ -1688,13 +1675,10 @@ function commitRoot(root) {
1675
// TODO: This no longer makes any sense. We already wrap the mutation and
1676
// layout phases. Should be able to remove.
1677
const previousUpdateLanePriority = getCurrentUpdatePriority();
1691
- const prevTransition = ReactCurrentBatchConfig.transition;
1678
try {
1693
- ReactCurrentBatchConfig.transition = 0;
1679
setCurrentUpdatePriority(DiscreteEventPriority);
1680
commitRootImpl(root, previousUpdateLanePriority);
1681
} finally {
1697
- ReactCurrentBatchConfig.transition = prevTransition;
1682
setCurrentUpdatePriority(previousUpdateLanePriority);
1683
}
1684
@@ -1816,8 +1800,6 @@ function commitRootImpl(root, renderPriorityLevel) {
1800
NoFlags;
1801
1802
if (subtreeHasEffects || rootHasEffect) {
1819
- const prevTransition = ReactCurrentBatchConfig.transition;
1820
- ReactCurrentBatchConfig.transition = 0;
1803
const previousPriority = getCurrentUpdatePriority();
1804
setCurrentUpdatePriority(DiscreteEventPriority);
1805
@@ -1899,7 +1881,6 @@ function commitRootImpl(root, renderPriorityLevel) {
1881
1882
// Reset the priority to the previous non-sync value.
1883
setCurrentUpdatePriority(previousPriority);
1902
- ReactCurrentBatchConfig.transition = prevTransition;
1884
} else {
1885
// No effects.
1886
root.current = finishedWork;
@@ -2036,15 +2017,12 @@ export function flushPassiveEffects(): boolean {
2017
if (rootWithPendingPassiveEffects !== null) {
2018
const renderPriority = lanesToEventPriority(pendingPassiveEffectsLanes);
2019
const priority = lowerEventPriority(DefaultEventPriority, renderPriority);
2039
- const prevTransition = ReactCurrentBatchConfig.transition;
2020
const previousPriority = getCurrentUpdatePriority();
2021
try {
2042
- ReactCurrentBatchConfig.transition = 0;
2022
setCurrentUpdatePriority(priority);
2023
return flushPassiveEffectsImpl();
2024
} finally {
2025
setCurrentUpdatePriority(previousPriority);
2047
- ReactCurrentBatchConfig.transition = prevTransition;
2026
}
2027
}
2028
return false;
packages/react-reconciler/src/__tests__/ReactFlushSync-test.js
-43
@@ -3,7 +3,6 @@ let ReactNoop;
3
let Scheduler;
4
let useState;
5
let useEffect;
6
-let startTransition;
6
7
describe('ReactFlushSync', () => {
8
beforeEach(() => {
@@ -14,7 +13,6 @@ describe('ReactFlushSync', () => {
13
Scheduler = require('scheduler');
14
useState = React.useState;
15
useEffect = React.useEffect;
17
- startTransition = React.unstable_startTransition;
16
});
17
18
function Text({text}) {
@@ -64,47 +62,6 @@ describe('ReactFlushSync', () => {
62
expect(root).toMatchRenderedOutput('1, 1');
63
});
64
67
- // @gate experimental
68
- test('nested with startTransition', async () => {
69
- let setSyncState;
70
- let setState;
71
- function App() {
72
- const [syncState, _setSyncState] = useState(0);
73
- const [state, _setState] = useState(0);
74
- setSyncState = _setSyncState;
75
- setState = _setState;
76
- return <Text text={`${syncState}, ${state}`} />;
77
- }
78
-
79
- const root = ReactNoop.createRoot();
80
- await ReactNoop.act(async () => {
81
- root.render(<App />);
82
- });
83
- expect(Scheduler).toHaveYielded(['0, 0']);
84
- expect(root).toMatchRenderedOutput('0, 0');
85
-
86
- await ReactNoop.act(async () => {
87
- ReactNoop.flushSync(() => {
88
- startTransition(() => {
89
- // This should be async even though flushSync is on the stack, because
90
- // startTransition is closer.
91
- setState(1);
92
- ReactNoop.flushSync(() => {
93
- // This should be async even though startTransition is on the stack,
94
- // because flushSync is closer.
95
- setSyncState(1);
96
- });
97
- });
98
- });
99
- // Only the sync update should have flushed
100
- expect(Scheduler).toHaveYielded(['1, 0']);
101
- expect(root).toMatchRenderedOutput('1, 0');
102
- });
103
- // Now the async update has flushed, too.
104
- expect(Scheduler).toHaveYielded(['1, 1']);
105
- expect(root).toMatchRenderedOutput('1, 1');
106
- });
107
-
65
test('flushes passive effects synchronously when they are the result of a sync render', async () => {
66
function App() {
67
useEffect(() => {