The library for web and native user interfaces.
Mirrored from https://github.com/247TaxiDriver/QOS-React.git
Synced Nov 8, 16:30 UTC
[Fiber] Trigger default indicator for isomorphic async actions with no root associated (#33190)
Stacked on #33160, #33162, #33186 and #33188. We have a special case that's awkward for default indicators. When you start a new async Transition from `React.startTransition` then there's not yet any associated root with the Transition because you haven't necessarily `setState` on anything yet until the promise resolves. That's what `entangleAsyncAction` handles by creating a lane that everything entangles with until all async actions are done. If there are no sync updates before the end of the event, we should trigger a default indicator until either the async action completes without update or if it gets entangled with some roots we should keep it going until those roots are done.
Sebastian Markbåge committed
May 13, 2025 at 16:10 UTC
3a5b326d8180f005a10e34a07ded6d5632efe337
5 files changed
+274
-20
fixtures/view-transition/src/components/Page.js
+1
-1
@@ -113,8 +113,8 @@ export default function Page({url, navigate}) {
113
<button
114
onClick={() =>
115
startTransition(async () => {
116
- setShowModal(true);
116
await sleep(2000);
117
+ setShowModal(true);
118
})
119
}>
120
Show Modal
packages/react-reconciler/src/ReactFiberAsyncAction.js
+101
-1
@@ -15,7 +15,10 @@ import type {
15
import type {Lane} from './ReactFiberLane';
16
import type {Transition} from 'react/src/ReactStartTransition';
17
18
-import {requestTransitionLane} from './ReactFiberRootScheduler';
18
+import {
19
+ requestTransitionLane,
20
+ ensureScheduleIsScheduled,
21
+} from './ReactFiberRootScheduler';
22
import {NoLane} from './ReactFiberLane';
23
import {
24
hasScheduledTransitionWork,
@@ -24,9 +27,13 @@ import {
27
import {
28
enableComponentPerformanceTrack,
29
enableProfilerTimer,
30
+ enableDefaultTransitionIndicator,
31
} from 'shared/ReactFeatureFlags';
32
import {clearEntangledAsyncTransitionTypes} from './ReactFiberTransitionTypes';
33
34
+import noop from 'shared/noop';
35
+import reportGlobalError from 'shared/reportGlobalError';
36
+
37
// If there are multiple, concurrent async actions, they are entangled. All
38
// transition updates that occur while the async action is still in progress
39
// are treated as part of the action.
@@ -46,6 +53,21 @@ let currentEntangledLane: Lane = NoLane;
53
// until the async action scope has completed.
54
let currentEntangledActionThenable: Thenable<void> | null = null;
55
56
+// Track the default indicator for every root. undefined means we haven't
57
+// had any roots registered yet. null means there's more than one callback.
58
+// If there's more than one callback we bailout to not supporting isomorphic
59
+// default indicators.
60
+let isomorphicDefaultTransitionIndicator:
61
+ | void
62
+ | null
63
+ | (() => void | (() => void)) = undefined;
64
+// The clean up function for the currently running indicator.
65
+let pendingIsomorphicIndicator: null | (() => void) = null;
66
+// The number of roots that have pending Transitions that depend on the
67
+// started isomorphic indicator.
68
+let pendingEntangledRoots: number = 0;
69
+let needsIsomorphicIndicator: boolean = false;
70
+
71
export function entangleAsyncAction<S>(
72
transition: Transition,
73
thenable: Thenable<S>,
@@ -66,6 +88,12 @@ export function entangleAsyncAction<S>(
88
},
89
};
90
currentEntangledActionThenable = entangledThenable;
91
+ if (enableDefaultTransitionIndicator) {
92
+ needsIsomorphicIndicator = true;
93
+ // We'll check if we need a default indicator in a microtask. Ensure
94
+ // we have this scheduled even if no root is scheduled.
95
+ ensureScheduleIsScheduled();
96
+ }
97
}
98
currentEntangledPendingCount++;
99
thenable.then(pingEngtangledActionScope, pingEngtangledActionScope);
@@ -86,6 +114,9 @@ function pingEngtangledActionScope() {
114
}
115
}
116
clearEntangledAsyncTransitionTypes();
117
+ if (pendingEntangledRoots === 0) {
118
+ stopIsomorphicDefaultIndicator();
119
+ }
120
if (currentEntangledListeners !== null) {
121
// All the actions have finished. Close the entangled async action scope
122
// and notify all the listeners.
@@ -98,6 +129,7 @@ function pingEngtangledActionScope() {
129
currentEntangledListeners = null;
130
currentEntangledLane = NoLane;
131
currentEntangledActionThenable = null;
132
+ needsIsomorphicIndicator = false;
133
for (let i = 0; i < listeners.length; i++) {
134
const listener = listeners[i];
135
listener();
@@ -161,3 +193,71 @@ export function peekEntangledActionLane(): Lane {
193
export function peekEntangledActionThenable(): Thenable<void> | null {
194
return currentEntangledActionThenable;
195
}
196
+
197
+export function registerDefaultIndicator(
198
+ onDefaultTransitionIndicator: () => void | (() => void),
199
+): void {
200
+ if (!enableDefaultTransitionIndicator) {
201
+ return;
202
+ }
203
+ if (isomorphicDefaultTransitionIndicator === undefined) {
204
+ isomorphicDefaultTransitionIndicator = onDefaultTransitionIndicator;
205
+ } else if (
206
+ isomorphicDefaultTransitionIndicator !== onDefaultTransitionIndicator
207
+ ) {
208
+ isomorphicDefaultTransitionIndicator = null;
209
+ // Stop any on-going indicator since it's now ambiguous.
210
+ stopIsomorphicDefaultIndicator();
211
+ }
212
+}
213
+
214
+export function startIsomorphicDefaultIndicatorIfNeeded() {
215
+ if (!enableDefaultTransitionIndicator) {
216
+ return;
217
+ }
218
+ if (!needsIsomorphicIndicator) {
219
+ return;
220
+ }
221
+ if (
222
+ isomorphicDefaultTransitionIndicator != null &&
223
+ pendingIsomorphicIndicator === null
224
+ ) {
225
+ try {
226
+ pendingIsomorphicIndicator =
227
+ isomorphicDefaultTransitionIndicator() || noop;
228
+ } catch (x) {
229
+ pendingIsomorphicIndicator = noop;
230
+ reportGlobalError(x);
231
+ }
232
+ }
233
+}
234
+
235
+function stopIsomorphicDefaultIndicator() {
236
+ if (!enableDefaultTransitionIndicator) {
237
+ return;
238
+ }
239
+ if (pendingIsomorphicIndicator !== null) {
240
+ const cleanup = pendingIsomorphicIndicator;
241
+ pendingIsomorphicIndicator = null;
242
+ cleanup();
243
+ }
244
+}
245
+
246
+function releaseIsomorphicIndicator() {
247
+ if (--pendingEntangledRoots === 0) {
248
+ stopIsomorphicDefaultIndicator();
249
+ }
250
+}
251
+
252
+export function hasOngoingIsomorphicIndicator(): boolean {
253
+ return pendingIsomorphicIndicator !== null;
254
+}
255
+
256
+export function retainIsomorphicIndicator(): () => void {
257
+ pendingEntangledRoots++;
258
+ return releaseIsomorphicIndicator;
259
+}
260
+
261
+export function markIsomorphicIndicatorHandled(): void {
262
+ needsIsomorphicIndicator = false;
263
+}
packages/react-reconciler/src/ReactFiberReconciler.js
+6
-1
@@ -125,6 +125,7 @@ export {
125
defaultOnRecoverableError,
126
} from './ReactFiberErrorLogger';
127
import {getLabelForLane, TotalLanes} from 'react-reconciler/src/ReactFiberLane';
128
+import {registerDefaultIndicator} from './ReactFiberAsyncAction';
129
130
type OpaqueRoot = FiberRoot;
131
@@ -259,7 +260,7 @@ export function createContainer(
260
): OpaqueRoot {
261
const hydrate = false;
262
const initialChildren = null;
262
- return createFiberRoot(
263
+ const root = createFiberRoot(
264
containerInfo,
265
tag,
266
hydrate,
@@ -274,6 +275,8 @@ export function createContainer(
275
onDefaultTransitionIndicator,
276
transitionCallbacks,
277
);
278
+ registerDefaultIndicator(onDefaultTransitionIndicator);
279
+ return root;
280
}
281
282
export function createHydrationContainer(
@@ -323,6 +326,8 @@ export function createHydrationContainer(
326
transitionCallbacks,
327
);
328
329
+ registerDefaultIndicator(onDefaultTransitionIndicator);
330
+
331
// TODO: Move this to FiberRoot constructor
332
root.context = getContextForSubtree(null);
333
packages/react-reconciler/src/ReactFiberRootScheduler.js
+40
-16
@@ -85,6 +85,13 @@ import {peekEntangledActionLane} from './ReactFiberAsyncAction';
85
import noop from 'shared/noop';
86
import reportGlobalError from 'shared/reportGlobalError';
87
88
+import {
89
+ startIsomorphicDefaultIndicatorIfNeeded,
90
+ hasOngoingIsomorphicIndicator,
91
+ retainIsomorphicIndicator,
92
+ markIsomorphicIndicatorHandled,
93
+} from './ReactFiberAsyncAction';
94
+
95
// A linked list of all the roots with pending work. In an idiomatic app,
96
// there's only a single root, but we do support multi root apps, hence this
97
// extra complexity. But this module is optimized for the single root case.
@@ -130,6 +137,20 @@ export function ensureRootIsScheduled(root: FiberRoot): void {
137
// without consulting the schedule.
138
mightHavePendingSyncWork = true;
139
140
+ ensureScheduleIsScheduled();
141
+
142
+ if (
143
+ __DEV__ &&
144
+ !disableLegacyMode &&
145
+ ReactSharedInternals.isBatchingLegacy &&
146
+ root.tag === LegacyRoot
147
+ ) {
148
+ // Special `act` case: Record whenever a legacy update is scheduled.
149
+ ReactSharedInternals.didScheduleLegacyUpdate = true;
150
+ }
151
+}
152
+
153
+export function ensureScheduleIsScheduled(): void {
154
// At the end of the current event, go through each of the roots and ensure
155
// there's a task scheduled for each one at the correct priority.
156
if (__DEV__ && ReactSharedInternals.actQueue !== null) {
@@ -144,16 +165,6 @@ export function ensureRootIsScheduled(root: FiberRoot): void {
165
scheduleImmediateRootScheduleTask();
166
}
167
}
147
-
148
- if (
149
- __DEV__ &&
150
- !disableLegacyMode &&
151
- ReactSharedInternals.isBatchingLegacy &&
152
- root.tag === LegacyRoot
153
- ) {
154
- // Special `act` case: Record whenever a legacy update is scheduled.
155
- ReactSharedInternals.didScheduleLegacyUpdate = true;
156
- }
168
}
169
170
export function flushSyncWorkOnAllRoots() {
@@ -339,18 +350,30 @@ function startDefaultTransitionIndicatorIfNeeded() {
350
if (!enableDefaultTransitionIndicator) {
351
return;
352
}
353
+ // Check if we need to start an isomorphic indicator like if an async action
354
+ // was started.
355
+ startIsomorphicDefaultIndicatorIfNeeded();
356
// Check all the roots if there are any new indicators needed.
357
let root = firstScheduledRoot;
358
while (root !== null) {
359
if (root.indicatorLanes !== NoLanes && root.pendingIndicator === null) {
360
// We have new indicator lanes that requires a loading state. Start the
361
// default transition indicator.
348
- try {
349
- const onDefaultTransitionIndicator = root.onDefaultTransitionIndicator;
350
- root.pendingIndicator = onDefaultTransitionIndicator() || noop;
351
- } catch (x) {
352
- root.pendingIndicator = noop;
353
- reportGlobalError(x);
362
+ if (hasOngoingIsomorphicIndicator()) {
363
+ // We already have an isomorphic indicator going which means it has to
364
+ // also apply to this root since it implies all roots have the same one.
365
+ // We retain this indicator so that it keeps going until we commit this
366
+ // root.
367
+ root.pendingIndicator = retainIsomorphicIndicator();
368
+ } else {
369
+ try {
370
+ const onDefaultTransitionIndicator =
371
+ root.onDefaultTransitionIndicator;
372
+ root.pendingIndicator = onDefaultTransitionIndicator() || noop;
373
+ } catch (x) {
374
+ root.pendingIndicator = noop;
375
+ reportGlobalError(x);
376
+ }
377
}
378
}
379
root = root.next;
@@ -708,5 +731,6 @@ export function markIndicatorHandled(root: FiberRoot): void {
731
// Clear it from the indicator lanes. We don't need to show a separate
732
// loading state for this lane.
733
root.indicatorLanes &= ~currentEventTransitionLane;
734
+ markIsomorphicIndicatorHandled();
735
}
736
}
packages/react-reconciler/src/__tests__/ReactDefaultTransitionIndicator-test.js
+126
-1
@@ -265,7 +265,6 @@ describe('ReactDefaultTransitionIndicator', () => {
265
266
await act(() => {
267
// Start an async action but we haven't called setState yet
268
- // TODO: This should ideally work with React.startTransition too but we don't know the root.
268
start(() => promise);
269
});
270
@@ -280,6 +279,132 @@ describe('ReactDefaultTransitionIndicator', () => {
279
expect(root).toMatchRenderedOutput('Hi');
280
});
281
282
+ // @gate enableDefaultTransitionIndicator
283
+ it('triggers the default indicator while an async transition is ongoing (isomorphic)', async () => {
284
+ let resolve;
285
+ const promise = new Promise(r => (resolve = r));
286
+ function App() {
287
+ return 'Hi';
288
+ }
289
+
290
+ const root = ReactNoop.createRoot({
291
+ onDefaultTransitionIndicator() {
292
+ Scheduler.log('start');
293
+ return () => {
294
+ Scheduler.log('stop');
295
+ };
296
+ },
297
+ });
298
+ await act(() => {
299
+ root.render(<App />);
300
+ });
301
+
302
+ assertLog([]);
303
+
304
+ await act(() => {
305
+ // Start an async action but we haven't called setState yet
306
+ React.startTransition(() => promise);
307
+ });
308
+
309
+ assertLog(['start']);
310
+
311
+ await act(async () => {
312
+ await resolve('Hello');
313
+ });
314
+
315
+ assertLog(['stop']);
316
+
317
+ expect(root).toMatchRenderedOutput('Hi');
318
+ });
319
+
320
+ it('does not triggers isomorphic async action default indicator if there are two different ones', async () => {
321
+ let resolve;
322
+ const promise = new Promise(r => (resolve = r));
323
+ function App() {
324
+ return 'Hi';
325
+ }
326
+
327
+ const root = ReactNoop.createRoot({
328
+ onDefaultTransitionIndicator() {
329
+ Scheduler.log('start');
330
+ return () => {
331
+ Scheduler.log('stop');
332
+ };
333
+ },
334
+ });
335
+ // Initialize second root. This is now ambiguous which indicator to use.
336
+ ReactNoop.createRoot({
337
+ onDefaultTransitionIndicator() {
338
+ Scheduler.log('start2');
339
+ return () => {
340
+ Scheduler.log('stop2');
341
+ };
342
+ },
343
+ });
344
+ await act(() => {
345
+ root.render(<App />);
346
+ });
347
+
348
+ assertLog([]);
349
+
350
+ await act(() => {
351
+ // Start an async action but we haven't called setState yet
352
+ React.startTransition(() => promise);
353
+ });
354
+
355
+ assertLog([]);
356
+
357
+ await act(async () => {
358
+ await resolve('Hello');
359
+ });
360
+
361
+ assertLog([]);
362
+
363
+ expect(root).toMatchRenderedOutput('Hi');
364
+ });
365
+
366
+ it('does not triggers isomorphic async action default indicator if there is a loading state', async () => {
367
+ let resolve;
368
+ const promise = new Promise(r => (resolve = r));
369
+ let update;
370
+ function App() {
371
+ const [state, setState] = useState(false);
372
+ update = setState;
373
+ return state ? 'Loading' : 'Hi';
374
+ }
375
+
376
+ const root = ReactNoop.createRoot({
377
+ onDefaultTransitionIndicator() {
378
+ Scheduler.log('start');
379
+ return () => {
380
+ Scheduler.log('stop');
381
+ };
382
+ },
383
+ });
384
+ await act(() => {
385
+ root.render(<App />);
386
+ });
387
+
388
+ assertLog([]);
389
+
390
+ await act(() => {
391
+ update(true);
392
+ React.startTransition(() => promise.then(() => update(false)));
393
+ });
394
+
395
+ assertLog([]);
396
+
397
+ expect(root).toMatchRenderedOutput('Loading');
398
+
399
+ await act(async () => {
400
+ await resolve('Hello');
401
+ });
402
+
403
+ assertLog([]);
404
+
405
+ expect(root).toMatchRenderedOutput('Hi');
406
+ });
407
+
408
it('should not trigger for useDeferredValue (sync)', async () => {
409
function Text({text}) {
410
Scheduler.log(text);