Skip to content

Commit f892d9b

Browse files
author
Brian Vaughn
committed
Track which fibers scheduled the current render work
1 parent 9ed0167 commit f892d9b

22 files changed

+1031
-42
lines changed

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

Lines changed: 54 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ import {
3636
enableScopeAPI,
3737
enableStrictEffects,
3838
deletedTreeCleanUpLevel,
39+
enableUpdaterTracking,
3940
} from 'shared/ReactFeatureFlags';
4041
import {
4142
FunctionComponent,
@@ -86,7 +87,7 @@ import {
8687
resetCurrentFiber as resetCurrentDebugFiberInDEV,
8788
setCurrentFiber as setCurrentDebugFiberInDEV,
8889
} from './ReactCurrentFiber';
89-
90+
import {isDevToolsPresent} from './ReactFiberDevToolsHook.new';
9091
import {onCommitUnmount} from './ReactFiberDevToolsHook.new';
9192
import {resolveDefaultProps} from './ReactFiberLazyComponent.new';
9293
import {
@@ -134,6 +135,7 @@ import {
134135
resolveRetryWakeable,
135136
markCommitTimeOfFallback,
136137
enqueuePendingPassiveProfilerEffect,
138+
restorePendingUpdaters,
137139
} from './ReactFiberWorkLoop.new';
138140
import {
139141
NoFlags as NoHookEffect,
@@ -1663,7 +1665,12 @@ function commitDeletion(
16631665
detachFiberMutation(current);
16641666
}
16651667

1666-
function commitWork(current: Fiber | null, finishedWork: Fiber): void {
1668+
function commitWork(
1669+
finishedRoot: FiberRoot,
1670+
current: Fiber | null,
1671+
finishedWork: Fiber,
1672+
committedLanes: Lanes,
1673+
): void {
16671674
if (!supportsMutation) {
16681675
switch (finishedWork.tag) {
16691676
case FunctionComponent:
@@ -1704,11 +1711,19 @@ function commitWork(current: Fiber | null, finishedWork: Fiber): void {
17041711
}
17051712
case SuspenseComponent: {
17061713
commitSuspenseComponent(finishedWork);
1707-
attachSuspenseRetryListeners(finishedWork);
1714+
attachSuspenseRetryListeners(
1715+
finishedRoot,
1716+
finishedWork,
1717+
committedLanes,
1718+
);
17081719
return;
17091720
}
17101721
case SuspenseListComponent: {
1711-
attachSuspenseRetryListeners(finishedWork);
1722+
attachSuspenseRetryListeners(
1723+
finishedRoot,
1724+
finishedWork,
1725+
committedLanes,
1726+
);
17121727
return;
17131728
}
17141729
case HostRoot: {
@@ -1827,11 +1842,11 @@ function commitWork(current: Fiber | null, finishedWork: Fiber): void {
18271842
}
18281843
case SuspenseComponent: {
18291844
commitSuspenseComponent(finishedWork);
1830-
attachSuspenseRetryListeners(finishedWork);
1845+
attachSuspenseRetryListeners(finishedRoot, finishedWork, committedLanes);
18311846
return;
18321847
}
18331848
case SuspenseListComponent: {
1834-
attachSuspenseRetryListeners(finishedWork);
1849+
attachSuspenseRetryListeners(finishedRoot, finishedWork, committedLanes);
18351850
return;
18361851
}
18371852
case IncompleteClassComponent: {
@@ -1927,7 +1942,11 @@ function commitSuspenseHydrationCallbacks(
19271942
}
19281943
}
19291944

1930-
function attachSuspenseRetryListeners(finishedWork: Fiber) {
1945+
function attachSuspenseRetryListeners(
1946+
finishedRoot: FiberRoot,
1947+
finishedWork: Fiber,
1948+
committedLanes: Lanes,
1949+
) {
19311950
// If this boundary just timed out, then it will have a set of wakeables.
19321951
// For each wakeable, attach a listener so that when it resolves, React
19331952
// attempts to re-render the boundary in the primary (pre-timeout) state.
@@ -1947,6 +1966,12 @@ function attachSuspenseRetryListeners(finishedWork: Fiber) {
19471966
retry = Schedule_tracing_wrap(retry);
19481967
}
19491968
}
1969+
if (enableUpdaterTracking) {
1970+
if (isDevToolsPresent) {
1971+
// If we have pending work still, associate the original updaters with it.
1972+
restorePendingUpdaters(finishedRoot, committedLanes);
1973+
}
1974+
}
19501975
retryCache.add(wakeable);
19511976
wakeable.then(retry, retry);
19521977
}
@@ -1978,12 +2003,16 @@ function commitResetTextContent(current: Fiber) {
19782003
resetTextContent(current.stateNode);
19792004
}
19802005

1981-
export function commitMutationEffects(root: FiberRoot, firstChild: Fiber) {
2006+
export function commitMutationEffects(
2007+
root: FiberRoot,
2008+
firstChild: Fiber,
2009+
committedLanes: Lanes,
2010+
) {
19822011
nextEffect = firstChild;
1983-
commitMutationEffects_begin(root);
2012+
commitMutationEffects_begin(root, committedLanes);
19842013
}
19852014

1986-
function commitMutationEffects_begin(root: FiberRoot) {
2015+
function commitMutationEffects_begin(root: FiberRoot, committedLanes: Lanes) {
19872016
while (nextEffect !== null) {
19882017
const fiber = nextEffect;
19892018

@@ -2020,12 +2049,15 @@ function commitMutationEffects_begin(root: FiberRoot) {
20202049
ensureCorrectReturnPointer(child, fiber);
20212050
nextEffect = child;
20222051
} else {
2023-
commitMutationEffects_complete(root);
2052+
commitMutationEffects_complete(root, committedLanes);
20242053
}
20252054
}
20262055
}
20272056

2028-
function commitMutationEffects_complete(root: FiberRoot) {
2057+
function commitMutationEffects_complete(
2058+
root: FiberRoot,
2059+
committedLanes: Lanes,
2060+
) {
20292061
while (nextEffect !== null) {
20302062
const fiber = nextEffect;
20312063
if (__DEV__) {
@@ -2036,6 +2068,7 @@ function commitMutationEffects_complete(root: FiberRoot) {
20362068
null,
20372069
fiber,
20382070
root,
2071+
committedLanes,
20392072
);
20402073
if (hasCaughtError()) {
20412074
const error = clearCaughtError();
@@ -2044,7 +2077,7 @@ function commitMutationEffects_complete(root: FiberRoot) {
20442077
resetCurrentDebugFiberInDEV();
20452078
} else {
20462079
try {
2047-
commitMutationEffectsOnFiber(fiber, root);
2080+
commitMutationEffectsOnFiber(fiber, root, committedLanes);
20482081
} catch (error) {
20492082
captureCommitPhaseError(fiber, fiber.return, error);
20502083
}
@@ -2061,7 +2094,11 @@ function commitMutationEffects_complete(root: FiberRoot) {
20612094
}
20622095
}
20632096

2064-
function commitMutationEffectsOnFiber(finishedWork: Fiber, root: FiberRoot) {
2097+
function commitMutationEffectsOnFiber(
2098+
finishedWork: Fiber,
2099+
root: FiberRoot,
2100+
committedLanes: Lanes,
2101+
) {
20652102
const flags = finishedWork.flags;
20662103

20672104
if (flags & ContentReset) {
@@ -2106,7 +2143,7 @@ function commitMutationEffectsOnFiber(finishedWork: Fiber, root: FiberRoot) {
21062143

21072144
// Update
21082145
const current = finishedWork.alternate;
2109-
commitWork(current, finishedWork);
2146+
commitWork(root, current, finishedWork, committedLanes);
21102147
break;
21112148
}
21122149
case Hydrating: {
@@ -2118,12 +2155,12 @@ function commitMutationEffectsOnFiber(finishedWork: Fiber, root: FiberRoot) {
21182155

21192156
// Update
21202157
const current = finishedWork.alternate;
2121-
commitWork(current, finishedWork);
2158+
commitWork(root, current, finishedWork, committedLanes);
21222159
break;
21232160
}
21242161
case Update: {
21252162
const current = finishedWork.alternate;
2126-
commitWork(current, finishedWork);
2163+
commitWork(root, current, finishedWork, committedLanes);
21272164
break;
21282165
}
21292166
}

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

Lines changed: 54 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ import {
3636
enableScopeAPI,
3737
enableStrictEffects,
3838
deletedTreeCleanUpLevel,
39+
enableUpdaterTracking,
3940
} from 'shared/ReactFeatureFlags';
4041
import {
4142
FunctionComponent,
@@ -86,7 +87,7 @@ import {
8687
resetCurrentFiber as resetCurrentDebugFiberInDEV,
8788
setCurrentFiber as setCurrentDebugFiberInDEV,
8889
} from './ReactCurrentFiber';
89-
90+
import {isDevToolsPresent} from './ReactFiberDevToolsHook.old';
9091
import {onCommitUnmount} from './ReactFiberDevToolsHook.old';
9192
import {resolveDefaultProps} from './ReactFiberLazyComponent.old';
9293
import {
@@ -134,6 +135,7 @@ import {
134135
resolveRetryWakeable,
135136
markCommitTimeOfFallback,
136137
enqueuePendingPassiveProfilerEffect,
138+
restorePendingUpdaters,
137139
} from './ReactFiberWorkLoop.old';
138140
import {
139141
NoFlags as NoHookEffect,
@@ -1663,7 +1665,12 @@ function commitDeletion(
16631665
detachFiberMutation(current);
16641666
}
16651667

1666-
function commitWork(current: Fiber | null, finishedWork: Fiber): void {
1668+
function commitWork(
1669+
finishedRoot: FiberRoot,
1670+
current: Fiber | null,
1671+
finishedWork: Fiber,
1672+
committedLanes: Lanes,
1673+
): void {
16671674
if (!supportsMutation) {
16681675
switch (finishedWork.tag) {
16691676
case FunctionComponent:
@@ -1704,11 +1711,19 @@ function commitWork(current: Fiber | null, finishedWork: Fiber): void {
17041711
}
17051712
case SuspenseComponent: {
17061713
commitSuspenseComponent(finishedWork);
1707-
attachSuspenseRetryListeners(finishedWork);
1714+
attachSuspenseRetryListeners(
1715+
finishedRoot,
1716+
finishedWork,
1717+
committedLanes,
1718+
);
17081719
return;
17091720
}
17101721
case SuspenseListComponent: {
1711-
attachSuspenseRetryListeners(finishedWork);
1722+
attachSuspenseRetryListeners(
1723+
finishedRoot,
1724+
finishedWork,
1725+
committedLanes,
1726+
);
17121727
return;
17131728
}
17141729
case HostRoot: {
@@ -1827,11 +1842,11 @@ function commitWork(current: Fiber | null, finishedWork: Fiber): void {
18271842
}
18281843
case SuspenseComponent: {
18291844
commitSuspenseComponent(finishedWork);
1830-
attachSuspenseRetryListeners(finishedWork);
1845+
attachSuspenseRetryListeners(finishedRoot, finishedWork, committedLanes);
18311846
return;
18321847
}
18331848
case SuspenseListComponent: {
1834-
attachSuspenseRetryListeners(finishedWork);
1849+
attachSuspenseRetryListeners(finishedRoot, finishedWork, committedLanes);
18351850
return;
18361851
}
18371852
case IncompleteClassComponent: {
@@ -1927,7 +1942,11 @@ function commitSuspenseHydrationCallbacks(
19271942
}
19281943
}
19291944

1930-
function attachSuspenseRetryListeners(finishedWork: Fiber) {
1945+
function attachSuspenseRetryListeners(
1946+
finishedRoot: FiberRoot,
1947+
finishedWork: Fiber,
1948+
committedLanes: Lanes,
1949+
) {
19311950
// If this boundary just timed out, then it will have a set of wakeables.
19321951
// For each wakeable, attach a listener so that when it resolves, React
19331952
// attempts to re-render the boundary in the primary (pre-timeout) state.
@@ -1947,6 +1966,12 @@ function attachSuspenseRetryListeners(finishedWork: Fiber) {
19471966
retry = Schedule_tracing_wrap(retry);
19481967
}
19491968
}
1969+
if (enableUpdaterTracking) {
1970+
if (isDevToolsPresent) {
1971+
// If we have pending work still, associate the original updaters with it.
1972+
restorePendingUpdaters(finishedRoot, committedLanes);
1973+
}
1974+
}
19501975
retryCache.add(wakeable);
19511976
wakeable.then(retry, retry);
19521977
}
@@ -1978,12 +2003,16 @@ function commitResetTextContent(current: Fiber) {
19782003
resetTextContent(current.stateNode);
19792004
}
19802005

1981-
export function commitMutationEffects(root: FiberRoot, firstChild: Fiber) {
2006+
export function commitMutationEffects(
2007+
root: FiberRoot,
2008+
firstChild: Fiber,
2009+
committedLanes: Lanes,
2010+
) {
19822011
nextEffect = firstChild;
1983-
commitMutationEffects_begin(root);
2012+
commitMutationEffects_begin(root, committedLanes);
19842013
}
19852014

1986-
function commitMutationEffects_begin(root: FiberRoot) {
2015+
function commitMutationEffects_begin(root: FiberRoot, committedLanes: Lanes) {
19872016
while (nextEffect !== null) {
19882017
const fiber = nextEffect;
19892018

@@ -2020,12 +2049,15 @@ function commitMutationEffects_begin(root: FiberRoot) {
20202049
ensureCorrectReturnPointer(child, fiber);
20212050
nextEffect = child;
20222051
} else {
2023-
commitMutationEffects_complete(root);
2052+
commitMutationEffects_complete(root, committedLanes);
20242053
}
20252054
}
20262055
}
20272056

2028-
function commitMutationEffects_complete(root: FiberRoot) {
2057+
function commitMutationEffects_complete(
2058+
root: FiberRoot,
2059+
committedLanes: Lanes,
2060+
) {
20292061
while (nextEffect !== null) {
20302062
const fiber = nextEffect;
20312063
if (__DEV__) {
@@ -2036,6 +2068,7 @@ function commitMutationEffects_complete(root: FiberRoot) {
20362068
null,
20372069
fiber,
20382070
root,
2071+
committedLanes,
20392072
);
20402073
if (hasCaughtError()) {
20412074
const error = clearCaughtError();
@@ -2044,7 +2077,7 @@ function commitMutationEffects_complete(root: FiberRoot) {
20442077
resetCurrentDebugFiberInDEV();
20452078
} else {
20462079
try {
2047-
commitMutationEffectsOnFiber(fiber, root);
2080+
commitMutationEffectsOnFiber(fiber, root, committedLanes);
20482081
} catch (error) {
20492082
captureCommitPhaseError(fiber, fiber.return, error);
20502083
}
@@ -2061,7 +2094,11 @@ function commitMutationEffects_complete(root: FiberRoot) {
20612094
}
20622095
}
20632096

2064-
function commitMutationEffectsOnFiber(finishedWork: Fiber, root: FiberRoot) {
2097+
function commitMutationEffectsOnFiber(
2098+
finishedWork: Fiber,
2099+
root: FiberRoot,
2100+
committedLanes: Lanes,
2101+
) {
20652102
const flags = finishedWork.flags;
20662103

20672104
if (flags & ContentReset) {
@@ -2106,7 +2143,7 @@ function commitMutationEffectsOnFiber(finishedWork: Fiber, root: FiberRoot) {
21062143

21072144
// Update
21082145
const current = finishedWork.alternate;
2109-
commitWork(current, finishedWork);
2146+
commitWork(root, current, finishedWork, committedLanes);
21102147
break;
21112148
}
21122149
case Hydrating: {
@@ -2118,12 +2155,12 @@ function commitMutationEffectsOnFiber(finishedWork: Fiber, root: FiberRoot) {
21182155

21192156
// Update
21202157
const current = finishedWork.alternate;
2121-
commitWork(current, finishedWork);
2158+
commitWork(root, current, finishedWork, committedLanes);
21222159
break;
21232160
}
21242161
case Update: {
21252162
const current = finishedWork.alternate;
2126-
commitWork(current, finishedWork);
2163+
commitWork(root, current, finishedWork, committedLanes);
21272164
break;
21282165
}
21292166
}

0 commit comments

Comments
 (0)