Move Update flag check into each switch case
The fiber tag is more specific than the effect flag, so we should always refine the type of work first, to minimize redundant checks. In the next step I'll move all other other flag checks in this function into the same switch statement.
Andrew Clark committed
Apr 7, 2022 at 19:51 UTC
54b5b32d53355ad1634a97e604a583e8da6fa842
2 files changed
+72
-72
packages/react-reconciler/src/ReactFiberCommitWork.new.js
+36
-36
@@ -2065,13 +2065,14 @@ function commitMutationEffectsOnFiber(
2065
finishedWork.flags &= ~Hydrating;
2066
}
2067
2068
+ // All logic in these branches should be wrapped in a flag check.
2069
// TODO: Move the ad-hoc flag checks above into the main switch statement.
2069
- if (flags & Update) {
2070
- switch (finishedWork.tag) {
2071
- case FunctionComponent:
2072
- case ForwardRef:
2073
- case MemoComponent:
2074
- case SimpleMemoComponent: {
2070
+ switch (finishedWork.tag) {
2071
+ case FunctionComponent:
2072
+ case ForwardRef:
2073
+ case MemoComponent:
2074
+ case SimpleMemoComponent: {
2075
+ if (flags & Update) {
2076
commitHookEffectListUnmount(
2077
HookInsertion | HookHasEffect,
2078
finishedWork,
@@ -2105,12 +2106,11 @@ function commitMutationEffectsOnFiber(
2106
finishedWork.return,
2107
);
2108
}
2108
- return;
2109
- }
2110
- case ClassComponent: {
2111
- return;
2109
}
2113
- case HostComponent: {
2110
+ return;
2111
+ }
2112
+ case HostComponent: {
2113
+ if (flags & Update) {
2114
if (supportsMutation) {
2115
const instance: Instance = finishedWork.stateNode;
2116
if (instance != null) {
@@ -2137,9 +2137,11 @@ function commitMutationEffectsOnFiber(
2137
}
2138
}
2139
}
2140
- return;
2140
}
2142
- case HostText: {
2141
+ return;
2142
+ }
2143
+ case HostText: {
2144
+ if (flags & Update) {
2145
if (supportsMutation) {
2146
if (finishedWork.stateNode === null) {
2147
throw new Error(
@@ -2157,9 +2159,11 @@ function commitMutationEffectsOnFiber(
2159
current !== null ? current.memoizedProps : newText;
2160
commitTextUpdate(textInstance, oldText, newText);
2161
}
2160
- return;
2162
}
2162
- case HostRoot: {
2163
+ return;
2164
+ }
2165
+ case HostRoot: {
2166
+ if (flags & Update) {
2167
if (supportsMutation && supportsHydration) {
2168
if (current !== null) {
2169
const prevRootState: RootState = current.memoizedState;
@@ -2173,45 +2177,41 @@ function commitMutationEffectsOnFiber(
2177
const pendingChildren = root.pendingChildren;
2178
replaceContainerChildren(containerInfo, pendingChildren);
2179
}
2176
- return;
2180
}
2178
- case HostPortal: {
2181
+ return;
2182
+ }
2183
+ case HostPortal: {
2184
+ if (flags & Update) {
2185
if (supportsPersistence) {
2186
const portal = finishedWork.stateNode;
2187
const containerInfo = portal.containerInfo;
2188
const pendingChildren = portal.pendingChildren;
2189
replaceContainerChildren(containerInfo, pendingChildren);
2190
}
2185
- return;
2186
- }
2187
- case Profiler: {
2188
- return;
2191
}
2190
- case SuspenseComponent: {
2192
+ return;
2193
+ }
2194
+ case SuspenseComponent: {
2195
+ if (flags & Update) {
2196
commitSuspenseCallback(finishedWork);
2197
attachSuspenseRetryListeners(finishedWork);
2193
- return;
2198
}
2195
- case SuspenseListComponent: {
2199
+ return;
2200
+ }
2201
+ case SuspenseListComponent: {
2202
+ if (flags & Update) {
2203
attachSuspenseRetryListeners(finishedWork);
2197
- return;
2198
- }
2199
- case IncompleteClassComponent: {
2200
- return;
2204
}
2202
- case ScopeComponent: {
2205
+ return;
2206
+ }
2207
+ case ScopeComponent: {
2208
+ if (flags & Update) {
2209
if (enableScopeAPI) {
2210
const scopeInstance = finishedWork.stateNode;
2211
prepareScopeUpdate(scopeInstance, finishedWork);
2212
}
2207
- return;
2208
- }
2209
- default: {
2210
- throw new Error(
2211
- 'This unit of work tag should not have side-effects. This error is ' +
2212
- 'likely caused by a bug in React. Please file an issue.',
2213
- );
2213
}
2214
+ return;
2215
}
2216
}
2217
}
packages/react-reconciler/src/ReactFiberCommitWork.old.js
+36
-36
@@ -2065,13 +2065,14 @@ function commitMutationEffectsOnFiber(
2065
finishedWork.flags &= ~Hydrating;
2066
}
2067
2068
+ // All logic in these branches should be wrapped in a flag check.
2069
// TODO: Move the ad-hoc flag checks above into the main switch statement.
2069
- if (flags & Update) {
2070
- switch (finishedWork.tag) {
2071
- case FunctionComponent:
2072
- case ForwardRef:
2073
- case MemoComponent:
2074
- case SimpleMemoComponent: {
2070
+ switch (finishedWork.tag) {
2071
+ case FunctionComponent:
2072
+ case ForwardRef:
2073
+ case MemoComponent:
2074
+ case SimpleMemoComponent: {
2075
+ if (flags & Update) {
2076
commitHookEffectListUnmount(
2077
HookInsertion | HookHasEffect,
2078
finishedWork,
@@ -2105,12 +2106,11 @@ function commitMutationEffectsOnFiber(
2106
finishedWork.return,
2107
);
2108
}
2108
- return;
2109
- }
2110
- case ClassComponent: {
2111
- return;
2109
}
2113
- case HostComponent: {
2110
+ return;
2111
+ }
2112
+ case HostComponent: {
2113
+ if (flags & Update) {
2114
if (supportsMutation) {
2115
const instance: Instance = finishedWork.stateNode;
2116
if (instance != null) {
@@ -2137,9 +2137,11 @@ function commitMutationEffectsOnFiber(
2137
}
2138
}
2139
}
2140
- return;
2140
}
2142
- case HostText: {
2141
+ return;
2142
+ }
2143
+ case HostText: {
2144
+ if (flags & Update) {
2145
if (supportsMutation) {
2146
if (finishedWork.stateNode === null) {
2147
throw new Error(
@@ -2157,9 +2159,11 @@ function commitMutationEffectsOnFiber(
2159
current !== null ? current.memoizedProps : newText;
2160
commitTextUpdate(textInstance, oldText, newText);
2161
}
2160
- return;
2162
}
2162
- case HostRoot: {
2163
+ return;
2164
+ }
2165
+ case HostRoot: {
2166
+ if (flags & Update) {
2167
if (supportsMutation && supportsHydration) {
2168
if (current !== null) {
2169
const prevRootState: RootState = current.memoizedState;
@@ -2173,45 +2177,41 @@ function commitMutationEffectsOnFiber(
2177
const pendingChildren = root.pendingChildren;
2178
replaceContainerChildren(containerInfo, pendingChildren);
2179
}
2176
- return;
2180
}
2178
- case HostPortal: {
2181
+ return;
2182
+ }
2183
+ case HostPortal: {
2184
+ if (flags & Update) {
2185
if (supportsPersistence) {
2186
const portal = finishedWork.stateNode;
2187
const containerInfo = portal.containerInfo;
2188
const pendingChildren = portal.pendingChildren;
2189
replaceContainerChildren(containerInfo, pendingChildren);
2190
}
2185
- return;
2186
- }
2187
- case Profiler: {
2188
- return;
2191
}
2190
- case SuspenseComponent: {
2192
+ return;
2193
+ }
2194
+ case SuspenseComponent: {
2195
+ if (flags & Update) {
2196
commitSuspenseCallback(finishedWork);
2197
attachSuspenseRetryListeners(finishedWork);
2193
- return;
2198
}
2195
- case SuspenseListComponent: {
2199
+ return;
2200
+ }
2201
+ case SuspenseListComponent: {
2202
+ if (flags & Update) {
2203
attachSuspenseRetryListeners(finishedWork);
2197
- return;
2198
- }
2199
- case IncompleteClassComponent: {
2200
- return;
2204
}
2202
- case ScopeComponent: {
2205
+ return;
2206
+ }
2207
+ case ScopeComponent: {
2208
+ if (flags & Update) {
2209
if (enableScopeAPI) {
2210
const scopeInstance = finishedWork.stateNode;
2211
prepareScopeUpdate(scopeInstance, finishedWork);
2212
}
2207
- return;
2208
- }
2209
- default: {
2210
- throw new Error(
2211
- 'This unit of work tag should not have side-effects. This error is ' +
2212
- 'likely caused by a bug in React. Please file an issue.',
2213
- );
2213
}
2214
+ return;
2215
}
2216
}
2217
}