Skip to content

Commit d1c8cda

Browse files
authored
Ensure updates are applied when diffInCommitPhase is on (#26977)
When we diffInCommitPhase there's no updatePayload, which caused no update to be applied. This is unfortunate because it would've been a lot easier to see this oversight if we didn't have to support both flags. I also carified that updateHostComponent is unnecessary in the new flag. We reuse updateHostComponent for HostSingleton and HostHoistables since it has a somewhat complex path but that means you have to remember when editing updateHostComponent that it's not just used for that tag. Luckily with the new flag, this is actually unnecessary since we just need to mark it for update if any props have changed and then we diff it later.
1 parent 613e6f5 commit d1c8cda

File tree

3 files changed

+53
-19
lines changed

3 files changed

+53
-19
lines changed

packages/react-dom/src/__tests__/ReactDOMFloat-test.js

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7084,5 +7084,26 @@ background-color: green;
70847084
</html>,
70857085
);
70867086
});
7087+
7088+
// @gate enableFloat
7089+
it('can update title tags', async () => {
7090+
const root = ReactDOMClient.createRoot(container);
7091+
await act(() => {
7092+
root.render(<title data-foo="foo">a title</title>);
7093+
});
7094+
await waitForAll([]);
7095+
7096+
expect(getMeaningfulChildren(document.head)).toEqual(
7097+
<title data-foo="foo">a title</title>,
7098+
);
7099+
7100+
await act(() => {
7101+
root.render(<title data-foo="bar">another title</title>);
7102+
});
7103+
await waitForAll([]);
7104+
expect(getMeaningfulChildren(document.head)).toEqual(
7105+
<title data-foo="bar">another title</title>,
7106+
);
7107+
});
70877108
});
70887109
});

packages/react-reconciler/src/ReactFiberCommitWork.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2692,7 +2692,7 @@ function commitMutationEffectsOnFiber(
26922692
const updatePayload: null | UpdatePayload =
26932693
(finishedWork.updateQueue: any);
26942694
finishedWork.updateQueue = null;
2695-
if (updatePayload !== null) {
2695+
if (updatePayload !== null || diffInCommitPhase) {
26962696
try {
26972697
commitUpdate(
26982698
finishedWork.stateNode,

packages/react-reconciler/src/ReactFiberCompleteWork.js

Lines changed: 31 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1160,17 +1160,23 @@ function completeWork(
11601160
return null;
11611161
} else {
11621162
// This is a Hoistable Instance
1163-
//
1164-
// We may have props to update on the Hoistable instance. We use the
1165-
// updateHostComponent path becuase it produces the update queue
1166-
// we need for Hoistables.
1167-
updateHostComponent(
1168-
current,
1169-
workInProgress,
1170-
type,
1171-
newProps,
1172-
renderLanes,
1173-
);
1163+
// We may have props to update on the Hoistable instance.
1164+
if (diffInCommitPhase && supportsMutation) {
1165+
const oldProps = current.memoizedProps;
1166+
if (oldProps !== newProps) {
1167+
markUpdate(workInProgress);
1168+
}
1169+
} else {
1170+
// We use the updateHostComponent path becuase it produces
1171+
// the update queue we need for Hoistables.
1172+
updateHostComponent(
1173+
current,
1174+
workInProgress,
1175+
type,
1176+
newProps,
1177+
renderLanes,
1178+
);
1179+
}
11741180

11751181
// This must come at the very end of the complete phase.
11761182
bubbleProperties(workInProgress);
@@ -1192,13 +1198,20 @@ function completeWork(
11921198
const rootContainerInstance = getRootHostContainer();
11931199
const type = workInProgress.type;
11941200
if (current !== null && workInProgress.stateNode != null) {
1195-
updateHostComponent(
1196-
current,
1197-
workInProgress,
1198-
type,
1199-
newProps,
1200-
renderLanes,
1201-
);
1201+
if (diffInCommitPhase && supportsMutation) {
1202+
const oldProps = current.memoizedProps;
1203+
if (oldProps !== newProps) {
1204+
markUpdate(workInProgress);
1205+
}
1206+
} else {
1207+
updateHostComponent(
1208+
current,
1209+
workInProgress,
1210+
type,
1211+
newProps,
1212+
renderLanes,
1213+
);
1214+
}
12021215

12031216
if (current.ref !== workInProgress.ref) {
12041217
markRef(workInProgress);

0 commit comments

Comments
 (0)