Skip to content

Commit 6a2703c

Browse files
acdliteacdlite
committed
Track event times per lane on the root
Previous strategy was to store the event time on the update object and accumulate the most recent one during the render phase. Among other advantages, by tracking them on the root, we can read the event time before the render phase has finished. I haven't removed the `eventTime` field from the update object yet, because it's still used to compute the timeout. Tracking the timeout on the root is my next step.
1 parent 99f7728 commit 6a2703c

6 files changed

Lines changed: 53 additions & 26 deletions

File tree

‎packages/react-reconciler/src/ReactFiberLane.js‎

Lines changed: 36 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -374,6 +374,25 @@ export function getNextLanes(root: FiberRoot, wipLanes: Lanes): Lanes {
374374
return nextLanes;
375375
}
376376

377+
export function getMostRecentEventTime(root: FiberRoot, lanes: Lanes): number {
378+
const eventTimes = root.eventTimes;
379+
380+
let mostRecentEventTime = NoTimestamp;
381+
while (lanes > 0) {
382+
const index = pickArbitraryLaneIndex(lanes);
383+
const lane = 1 << index;
384+
385+
const eventTime = eventTimes[index];
386+
if (eventTime > mostRecentEventTime) {
387+
mostRecentEventTime = eventTime;
388+
}
389+
390+
lanes &= ~lane;
391+
}
392+
393+
return mostRecentEventTime;
394+
}
395+
377396
function computeExpirationTime(lane: Lane, currentTime: number) {
378397
// TODO: Expiration heuristic is constant per lane, so could use a map.
379398
getHighestPriorityLanes(lane);
@@ -606,10 +625,14 @@ export function pickArbitraryLane(lanes: Lanes): Lane {
606625
return getHighestPriorityLane(lanes);
607626
}
608627

609-
function pickArbitraryLaneIndex(lanes: Lane | Lanes) {
628+
function pickArbitraryLaneIndex(lanes: Lanes) {
610629
return 31 - clz32(lanes);
611630
}
612631

632+
function laneToIndex(lane: Lane) {
633+
return pickArbitraryLaneIndex(lane);
634+
}
635+
613636
export function includesSomeLane(a: Lanes | Lane, b: Lanes | Lane) {
614637
return (a & b) !== NoLanes;
615638
}
@@ -670,6 +693,12 @@ export function markRootUpdated(
670693

671694
root.suspendedLanes &= higherPriorityLanes;
672695
root.pingedLanes &= higherPriorityLanes;
696+
697+
const eventTimes = root.eventTimes;
698+
const index = laneToIndex(updateLane);
699+
// We can always overwrite an existing timestamp because we prefer the most
700+
// recent event, and we assume time is monotonically increasing.
701+
eventTimes[index] = eventTime;
673702
}
674703

675704
export function markRootSuspended(root: FiberRoot, suspendedLanes: Lanes) {
@@ -727,13 +756,18 @@ export function markRootFinished(root: FiberRoot, remainingLanes: Lanes) {
727756

728757
root.entangledLanes &= remainingLanes;
729758

759+
const entanglements = root.entanglements;
760+
const eventTimes = root.eventTimes;
730761
const expirationTimes = root.expirationTimes;
762+
763+
// Clear the lanes that no longer have pending work
731764
let lanes = noLongerPendingLanes;
732765
while (lanes > 0) {
733766
const index = pickArbitraryLaneIndex(lanes);
734767
const lane = 1 << index;
735768

736-
// Clear the expiration time
769+
entanglements[index] = NoLanes;
770+
eventTimes[index] = NoTimestamp;
737771
expirationTimes[index] = NoTimestamp;
738772

739773
lanes &= ~lane;

‎packages/react-reconciler/src/ReactFiberRoot.new.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ function FiberRootNode(containerInfo, tag, hydrate) {
4040
this.callbackNode = null;
4141
this.callbackId = NoLanes;
4242
this.callbackPriority = NoLanePriority;
43+
this.eventTimes = createLaneMap(NoLanes);
4344
this.expirationTimes = createLaneMap(NoTimestamp);
4445

4546
this.pendingLanes = NoLanes;

‎packages/react-reconciler/src/ReactFiberRoot.old.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ function FiberRootNode(containerInfo, tag, hydrate) {
4040
this.callbackNode = null;
4141
this.callbackId = NoLanes;
4242
this.callbackPriority = NoLanePriority;
43+
this.eventTimes = createLaneMap(NoLanes);
4344
this.expirationTimes = createLaneMap(NoTimestamp);
4445

4546
this.pendingLanes = NoLanes;

‎packages/react-reconciler/src/ReactFiberWorkLoop.new.js‎

Lines changed: 7 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -171,6 +171,7 @@ import {
171171
getCurrentUpdateLanePriority,
172172
markStarvedLanesAsExpired,
173173
getLanesToRetrySynchronouslyOnError,
174+
getMostRecentEventTime,
174175
markRootUpdated,
175176
markRootSuspended as markRootSuspended_dontCallThisOneDirectly,
176177
markRootPinged,
@@ -294,8 +295,6 @@ const subtreeRenderLanesCursor: StackCursor<Lanes> = createCursor(NoLanes);
294295
let workInProgressRootExitStatus: RootExitStatus = RootIncomplete;
295296
// A fatal error, if one is thrown
296297
let workInProgressRootFatalError: mixed = null;
297-
// Most recent event time among processed updates during this render.
298-
let workInProgressRootLatestProcessedEventTime: number = NoTimestamp;
299298
let workInProgressRootLatestSuspenseTimeout: number = NoTimestamp;
300299
let workInProgressRootCanSuspendUsingConfig: null | SuspenseConfig = null;
301300
// "Included" lanes refer to lanes that were worked on during this render. It's
@@ -938,20 +937,21 @@ function finishConcurrentRender(root, finishedWork, exitStatus, lanes) {
938937
break;
939938
}
940939

940+
const mostRecentEventTime = getMostRecentEventTime(root, lanes);
941941
let msUntilTimeout;
942942
if (workInProgressRootLatestSuspenseTimeout !== NoTimestamp) {
943943
// We have processed a suspense config whose expiration time we
944944
// can use as the timeout.
945945
msUntilTimeout = workInProgressRootLatestSuspenseTimeout - now();
946-
} else if (workInProgressRootLatestProcessedEventTime === NoTimestamp) {
946+
} else if (mostRecentEventTime === NoTimestamp) {
947947
// This should never normally happen because only new updates
948948
// cause delayed states, so we should have processed something.
949949
// However, this could also happen in an offscreen tree.
950950
msUntilTimeout = 0;
951951
} else {
952952
// If we didn't process a suspense config, compute a JND based on
953953
// the amount of time elapsed since the most recent event time.
954-
const eventTimeMs = workInProgressRootLatestProcessedEventTime;
954+
const eventTimeMs = mostRecentEventTime;
955955
const timeElapsedMs = now() - eventTimeMs;
956956
msUntilTimeout = jnd(timeElapsedMs) - timeElapsedMs;
957957
}
@@ -974,18 +974,19 @@ function finishConcurrentRender(root, finishedWork, exitStatus, lanes) {
974974
}
975975
case RootCompleted: {
976976
// The work completed. Ready to commit.
977+
const mostRecentEventTime = getMostRecentEventTime(root, lanes);
977978
if (
978979
// do not delay if we're inside an act() scope
979980
!shouldForceFlushFallbacksInDEV() &&
980-
workInProgressRootLatestProcessedEventTime !== NoTimestamp &&
981+
mostRecentEventTime !== NoTimestamp &&
981982
workInProgressRootCanSuspendUsingConfig !== null
982983
) {
983984
// If we have exceeded the minimum loading delay, which probably
984985
// means we have shown a spinner already, we might have to suspend
985986
// a bit longer to ensure that the spinner is shown for
986987
// enough time.
987988
const msUntilTimeout = computeMsUntilSuspenseLoadingDelay(
988-
workInProgressRootLatestProcessedEventTime,
989+
mostRecentEventTime,
989990
workInProgressRootCanSuspendUsingConfig,
990991
);
991992
if (msUntilTimeout > 10) {
@@ -1323,7 +1324,6 @@ function prepareFreshStack(root: FiberRoot, lanes: Lanes) {
13231324
workInProgressRootRenderLanes = subtreeRenderLanes = workInProgressRootIncludedLanes = lanes;
13241325
workInProgressRootExitStatus = RootIncomplete;
13251326
workInProgressRootFatalError = null;
1326-
workInProgressRootLatestProcessedEventTime = NoTimestamp;
13271327
workInProgressRootLatestSuspenseTimeout = NoTimestamp;
13281328
workInProgressRootCanSuspendUsingConfig = null;
13291329
workInProgressRootSkippedLanes = NoLanes;
@@ -1441,11 +1441,6 @@ export function markRenderEventTimeAndConfig(
14411441
eventTime: number,
14421442
suspenseConfig: null | SuspenseConfig,
14431443
): void {
1444-
// Track the most recent event time of all updates processed in this batch.
1445-
if (workInProgressRootLatestProcessedEventTime < eventTime) {
1446-
workInProgressRootLatestProcessedEventTime = eventTime;
1447-
}
1448-
14491444
// Track the largest/latest timeout deadline in this batch.
14501445
// TODO: If there are two transitions in the same batch, shouldn't we
14511446
// choose the smaller one? Maybe this is because when an intermediate

‎packages/react-reconciler/src/ReactFiberWorkLoop.old.js‎

Lines changed: 7 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -163,6 +163,7 @@ import {
163163
getCurrentUpdateLanePriority,
164164
markStarvedLanesAsExpired,
165165
getLanesToRetrySynchronouslyOnError,
166+
getMostRecentEventTime,
166167
markRootUpdated,
167168
markRootSuspended as markRootSuspended_dontCallThisOneDirectly,
168169
markRootPinged,
@@ -286,8 +287,6 @@ const subtreeRenderLanesCursor: StackCursor<Lanes> = createCursor(NoLanes);
286287
let workInProgressRootExitStatus: RootExitStatus = RootIncomplete;
287288
// A fatal error, if one is thrown
288289
let workInProgressRootFatalError: mixed = null;
289-
// Most recent event time among processed updates during this render.
290-
let workInProgressRootLatestProcessedEventTime: number = NoTimestamp;
291290
let workInProgressRootLatestSuspenseTimeout: number = NoTimestamp;
292291
let workInProgressRootCanSuspendUsingConfig: null | SuspenseConfig = null;
293292
// "Included" lanes refer to lanes that were worked on during this render. It's
@@ -931,20 +930,21 @@ function finishConcurrentRender(root, finishedWork, exitStatus, lanes) {
931930
break;
932931
}
933932

933+
const mostRecentEventTime = getMostRecentEventTime(root, lanes);
934934
let msUntilTimeout;
935935
if (workInProgressRootLatestSuspenseTimeout !== NoTimestamp) {
936936
// We have processed a suspense config whose expiration time we
937937
// can use as the timeout.
938938
msUntilTimeout = workInProgressRootLatestSuspenseTimeout - now();
939-
} else if (workInProgressRootLatestProcessedEventTime === NoTimestamp) {
939+
} else if (mostRecentEventTime === NoTimestamp) {
940940
// This should never normally happen because only new updates
941941
// cause delayed states, so we should have processed something.
942942
// However, this could also happen in an offscreen tree.
943943
msUntilTimeout = 0;
944944
} else {
945945
// If we didn't process a suspense config, compute a JND based on
946946
// the amount of time elapsed since the most recent event time.
947-
const eventTimeMs = workInProgressRootLatestProcessedEventTime;
947+
const eventTimeMs = mostRecentEventTime;
948948
const timeElapsedMs = now() - eventTimeMs;
949949
msUntilTimeout = jnd(timeElapsedMs) - timeElapsedMs;
950950
}
@@ -967,18 +967,19 @@ function finishConcurrentRender(root, finishedWork, exitStatus, lanes) {
967967
}
968968
case RootCompleted: {
969969
// The work completed. Ready to commit.
970+
const mostRecentEventTime = getMostRecentEventTime(root, lanes);
970971
if (
971972
// do not delay if we're inside an act() scope
972973
!shouldForceFlushFallbacksInDEV() &&
973-
workInProgressRootLatestProcessedEventTime !== NoTimestamp &&
974+
mostRecentEventTime !== NoTimestamp &&
974975
workInProgressRootCanSuspendUsingConfig !== null
975976
) {
976977
// If we have exceeded the minimum loading delay, which probably
977978
// means we have shown a spinner already, we might have to suspend
978979
// a bit longer to ensure that the spinner is shown for
979980
// enough time.
980981
const msUntilTimeout = computeMsUntilSuspenseLoadingDelay(
981-
workInProgressRootLatestProcessedEventTime,
982+
mostRecentEventTime,
982983
workInProgressRootCanSuspendUsingConfig,
983984
);
984985
if (msUntilTimeout > 10) {
@@ -1316,7 +1317,6 @@ function prepareFreshStack(root: FiberRoot, lanes: Lanes) {
13161317
workInProgressRootRenderLanes = subtreeRenderLanes = workInProgressRootIncludedLanes = lanes;
13171318
workInProgressRootExitStatus = RootIncomplete;
13181319
workInProgressRootFatalError = null;
1319-
workInProgressRootLatestProcessedEventTime = NoTimestamp;
13201320
workInProgressRootLatestSuspenseTimeout = NoTimestamp;
13211321
workInProgressRootCanSuspendUsingConfig = null;
13221322
workInProgressRootSkippedLanes = NoLanes;
@@ -1434,11 +1434,6 @@ export function markRenderEventTimeAndConfig(
14341434
eventTime: number,
14351435
suspenseConfig: null | SuspenseConfig,
14361436
): void {
1437-
// Track the most recent event time of all updates processed in this batch.
1438-
if (workInProgressRootLatestProcessedEventTime < eventTime) {
1439-
workInProgressRootLatestProcessedEventTime = eventTime;
1440-
}
1441-
14421437
// Track the largest/latest timeout deadline in this batch.
14431438
// TODO: If there are two transitions in the same batch, shouldn't we
14441439
// choose the smaller one? Maybe this is because when an intermediate

‎packages/react-reconciler/src/ReactInternalTypes.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -217,6 +217,7 @@ type BaseFiberRootProperties = {|
217217
// if it's already working.
218218
callbackId: Lanes,
219219
callbackPriority: LanePriority,
220+
eventTimes: LaneMap<number>,
220221
expirationTimes: LaneMap<number>,
221222

222223
pendingLanes: Lanes,

0 commit comments

Comments
 (0)
⚡