Skip to content

Commit 7c7c918

Browse files
author
Brian Vaughn
committed
Moved onCommit and onPassiveCommit behind separate feature flag
1 parent f7d1ee2 commit 7c7c918

File tree

4 files changed

+114
-52
lines changed

4 files changed

+114
-52
lines changed

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

+80-41
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ import {
2929
deferPassiveEffectCleanupDuringUnmount,
3030
enableSchedulerTracing,
3131
enableProfilerTimer,
32+
enableProfilerCommitHooks,
3233
enableSuspenseServerRenderer,
3334
enableDeprecatedFlareAPI,
3435
enableFundamentalAPI,
@@ -183,7 +184,11 @@ const callComponentWillUnmountWithTimer = function(current, instance) {
183184
startPhaseTimer(current, 'componentWillUnmount');
184185
instance.props = current.memoizedProps;
185186
instance.state = current.memoizedState;
186-
if (enableProfilerTimer && current.mode & ProfileMode) {
187+
if (
188+
enableProfilerTimer &&
189+
enableProfilerCommitHooks &&
190+
current.mode & ProfileMode
191+
) {
187192
try {
188193
startLayoutEffectTimer();
189194
instance.componentWillUnmount();
@@ -447,7 +452,11 @@ export function commitPassiveHookEffects(finishedWork: Fiber): void {
447452
// TODO (#17945) We should call all passive destroy functions (for all fibers)
448453
// before calling any create functions. The current approach only serializes
449454
// these for a single fiber.
450-
if (enableProfilerTimer && finishedWork.mode & ProfileMode) {
455+
if (
456+
enableProfilerTimer &&
457+
enableProfilerCommitHooks &&
458+
finishedWork.mode & ProfileMode
459+
) {
451460
try {
452461
startPassiveEffectTimer();
453462
commitHookEffectListUnmount(
@@ -480,7 +489,7 @@ export function commitPassiveEffectDurations(
480489
finishedRoot: FiberRoot,
481490
finishedWork: Fiber,
482491
): void {
483-
if (enableProfilerTimer) {
492+
if (enableProfilerTimer && enableProfilerCommitHooks) {
484493
// Only Profilers with work in their subtree will have an Update effect scheduled.
485494
if ((finishedWork.effectTag & Update) !== NoEffect) {
486495
switch (finishedWork.tag) {
@@ -546,7 +555,11 @@ function commitLifeCycles(
546555
// This is done to prevent sibling component effects from interfering with each other,
547556
// e.g. a destroy function in one component should never override a ref set
548557
// by a create function in another component during the same commit.
549-
if (enableProfilerTimer && finishedWork.mode & ProfileMode) {
558+
if (
559+
enableProfilerTimer &&
560+
enableProfilerCommitHooks &&
561+
finishedWork.mode & ProfileMode
562+
) {
550563
try {
551564
startLayoutEffectTimer();
552565
commitHookEffectListMount(HookLayout | HookHasEffect, finishedWork);
@@ -597,7 +610,11 @@ function commitLifeCycles(
597610
}
598611
}
599612
}
600-
if (enableProfilerTimer && finishedWork.mode & ProfileMode) {
613+
if (
614+
enableProfilerTimer &&
615+
enableProfilerCommitHooks &&
616+
finishedWork.mode & ProfileMode
617+
) {
601618
try {
602619
startLayoutEffectTimer();
603620
instance.componentDidMount();
@@ -645,7 +662,11 @@ function commitLifeCycles(
645662
}
646663
}
647664
}
648-
if (enableProfilerTimer && finishedWork.mode & ProfileMode) {
665+
if (
666+
enableProfilerTimer &&
667+
enableProfilerCommitHooks &&
668+
finishedWork.mode & ProfileMode
669+
) {
649670
try {
650671
startLayoutEffectTimer();
651672
instance.componentDidUpdate(
@@ -773,40 +794,42 @@ function commitLifeCycles(
773794
}
774795
}
775796

776-
if (typeof onCommit === 'function') {
777-
if (enableSchedulerTracing) {
778-
onCommit(
779-
finishedWork.memoizedProps.id,
780-
current === null ? 'mount' : 'update',
781-
effectDuration,
782-
commitTime,
783-
finishedRoot.memoizedInteractions,
784-
);
785-
} else {
786-
onCommit(
787-
finishedWork.memoizedProps.id,
788-
current === null ? 'mount' : 'update',
789-
effectDuration,
790-
commitTime,
791-
);
797+
if (enableProfilerCommitHooks) {
798+
if (typeof onCommit === 'function') {
799+
if (enableSchedulerTracing) {
800+
onCommit(
801+
finishedWork.memoizedProps.id,
802+
current === null ? 'mount' : 'update',
803+
effectDuration,
804+
commitTime,
805+
finishedRoot.memoizedInteractions,
806+
);
807+
} else {
808+
onCommit(
809+
finishedWork.memoizedProps.id,
810+
current === null ? 'mount' : 'update',
811+
effectDuration,
812+
commitTime,
813+
);
814+
}
792815
}
793-
}
794816

795-
// Schedule a passive effect for this Profiler to call onPostCommit hooks.
796-
// This effect should be scheduled even if there is no onPostCommit callback for this Profiler,
797-
// because the effect is also where times bubble to parent Profilers.
798-
enqueuePendingPassiveProfilerEffect(finishedWork);
799-
800-
// Propagate layout effect durations to the next nearest Profiler ancestor.
801-
// Do not reset these values until the next render so DevTools has a chance to read them first.
802-
let parentFiber = finishedWork.return;
803-
while (parentFiber !== null) {
804-
if (parentFiber.tag === Profiler) {
805-
const parentStateNode = parentFiber.stateNode;
806-
parentStateNode.effectDuration += effectDuration;
807-
break;
817+
// Schedule a passive effect for this Profiler to call onPostCommit hooks.
818+
// This effect should be scheduled even if there is no onPostCommit callback for this Profiler,
819+
// because the effect is also where times bubble to parent Profilers.
820+
enqueuePendingPassiveProfilerEffect(finishedWork);
821+
822+
// Propagate layout effect durations to the next nearest Profiler ancestor.
823+
// Do not reset these values until the next render so DevTools has a chance to read them first.
824+
let parentFiber = finishedWork.return;
825+
while (parentFiber !== null) {
826+
if (parentFiber.tag === Profiler) {
827+
const parentStateNode = parentFiber.stateNode;
828+
parentStateNode.effectDuration += effectDuration;
829+
break;
830+
}
831+
parentFiber = parentFiber.return;
808832
}
809-
parentFiber = parentFiber.return;
810833
}
811834
}
812835
return;
@@ -958,7 +981,11 @@ function commitUnmount(
958981
if ((tag & HookPassive) !== NoHookEffect) {
959982
enqueuePendingPassiveHookEffectUnmount(current, effect);
960983
} else {
961-
if (enableProfilerTimer && current.mode & ProfileMode) {
984+
if (
985+
enableProfilerTimer &&
986+
enableProfilerCommitHooks &&
987+
current.mode & ProfileMode
988+
) {
962989
startLayoutEffectTimer();
963990
safelyCallDestroy(current, destroy);
964991
recordLayoutEffectDuration(current);
@@ -991,7 +1018,11 @@ function commitUnmount(
9911018
do {
9921019
const {destroy, tag} = effect;
9931020
if (destroy !== undefined) {
994-
if (enableProfilerTimer && current.mode & ProfileMode) {
1021+
if (
1022+
enableProfilerTimer &&
1023+
enableProfilerCommitHooks &&
1024+
current.mode & ProfileMode
1025+
) {
9951026
if ((tag & HookPassive) !== NoHookEffect) {
9961027
safelyCallDestroy(current, destroy);
9971028
} else {
@@ -1543,7 +1574,11 @@ function commitWork(current: Fiber | null, finishedWork: Fiber): void {
15431574
// This prevents sibling component effects from interfering with each other,
15441575
// e.g. a destroy function in one component should never override a ref set
15451576
// by a create function in another component during the same commit.
1546-
if (enableProfilerTimer && finishedWork.mode & ProfileMode) {
1577+
if (
1578+
enableProfilerTimer &&
1579+
enableProfilerCommitHooks &&
1580+
finishedWork.mode & ProfileMode
1581+
) {
15471582
try {
15481583
startLayoutEffectTimer();
15491584
commitHookEffectListUnmount(
@@ -1598,7 +1633,11 @@ function commitWork(current: Fiber | null, finishedWork: Fiber): void {
15981633
// This prevents sibling component effects from interfering with each other,
15991634
// e.g. a destroy function in one component should never override a ref set
16001635
// by a create function in another component during the same commit.
1601-
if (enableProfilerTimer && finishedWork.mode & ProfileMode) {
1636+
if (
1637+
enableProfilerTimer &&
1638+
enableProfilerCommitHooks &&
1639+
finishedWork.mode & ProfileMode
1640+
) {
16021641
try {
16031642
startLayoutEffectTimer();
16041643
commitHookEffectListUnmount(HookLayout | HookHasEffect, finishedWork);

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

+23-6
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ import {
2424
enableSuspenseServerRenderer,
2525
replayFailedUnitOfWorkWithInvokeGuardedCallback,
2626
enableProfilerTimer,
27+
enableProfilerCommitHooks,
2728
enableSchedulerTracing,
2829
warnAboutUnmockedScheduler,
2930
flushSuspenseFallbacksInTests,
@@ -2184,7 +2185,7 @@ export function flushPassiveEffects() {
21842185
}
21852186

21862187
export function enqueuePendingPassiveProfilerEffect(fiber: Fiber): void {
2187-
if (enableProfilerTimer) {
2188+
if (enableProfilerTimer && enableProfilerCommitHooks) {
21882189
pendingPassiveProfilerEffects.push(fiber);
21892190
if (!rootDoesHavePassiveEffects) {
21902191
rootDoesHavePassiveEffects = true;
@@ -2270,7 +2271,11 @@ function flushPassiveEffectsImpl() {
22702271
if (typeof destroy === 'function') {
22712272
if (__DEV__) {
22722273
setCurrentDebugFiberInDEV(fiber);
2273-
if (enableProfilerTimer && fiber.mode & ProfileMode) {
2274+
if (
2275+
enableProfilerTimer &&
2276+
enableProfilerCommitHooks &&
2277+
fiber.mode & ProfileMode
2278+
) {
22742279
startPassiveEffectTimer();
22752280
invokeGuardedCallback(null, destroy, null);
22762281
recordPassiveEffectDuration(fiber);
@@ -2285,7 +2290,11 @@ function flushPassiveEffectsImpl() {
22852290
resetCurrentDebugFiberInDEV();
22862291
} else {
22872292
try {
2288-
if (enableProfilerTimer && fiber.mode & ProfileMode) {
2293+
if (
2294+
enableProfilerTimer &&
2295+
enableProfilerCommitHooks &&
2296+
fiber.mode & ProfileMode
2297+
) {
22892298
try {
22902299
startPassiveEffectTimer();
22912300
destroy();
@@ -2310,7 +2319,11 @@ function flushPassiveEffectsImpl() {
23102319
const fiber = ((mountEffects[i + 1]: any): Fiber);
23112320
if (__DEV__) {
23122321
setCurrentDebugFiberInDEV(fiber);
2313-
if (enableProfilerTimer && fiber.mode & ProfileMode) {
2322+
if (
2323+
enableProfilerTimer &&
2324+
enableProfilerCommitHooks &&
2325+
fiber.mode & ProfileMode
2326+
) {
23142327
startPassiveEffectTimer();
23152328
invokeGuardedCallback(null, invokePassiveEffectCreate, null, effect);
23162329
recordPassiveEffectDuration(fiber);
@@ -2326,7 +2339,11 @@ function flushPassiveEffectsImpl() {
23262339
} else {
23272340
try {
23282341
const create = effect.create;
2329-
if (enableProfilerTimer && fiber.mode & ProfileMode) {
2342+
if (
2343+
enableProfilerTimer &&
2344+
enableProfilerCommitHooks &&
2345+
fiber.mode & ProfileMode
2346+
) {
23302347
try {
23312348
startPassiveEffectTimer();
23322349
effect.destroy = create();
@@ -2373,7 +2390,7 @@ function flushPassiveEffectsImpl() {
23732390
}
23742391
}
23752392

2376-
if (enableProfilerTimer) {
2393+
if (enableProfilerTimer && enableProfilerCommitHooks) {
23772394
let profilerEffects = pendingPassiveProfilerEffects;
23782395
pendingPassiveProfilerEffects = [];
23792396
for (let i = 0; i < profilerEffects.length; i++) {

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

+8-5
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,10 @@
99

1010
import type {Fiber} from './ReactFiber';
1111

12-
import {enableProfilerTimer} from 'shared/ReactFeatureFlags';
12+
import {
13+
enableProfilerTimer,
14+
enableProfilerCommitHooks,
15+
} from 'shared/ReactFeatureFlags';
1316
import {Profiler} from 'shared/ReactWorkTags';
1417

1518
// Intentionally not named imports because Rollup would use dynamic dispatch for
@@ -81,7 +84,7 @@ function stopProfilerTimerIfRunningAndRecordDelta(
8184
}
8285

8386
function recordLayoutEffectDuration(fiber: Fiber): void {
84-
if (!enableProfilerTimer) {
87+
if (!enableProfilerTimer || !enableProfilerCommitHooks) {
8588
return;
8689
}
8790

@@ -104,7 +107,7 @@ function recordLayoutEffectDuration(fiber: Fiber): void {
104107
}
105108

106109
function recordPassiveEffectDuration(fiber: Fiber): void {
107-
if (!enableProfilerTimer) {
110+
if (!enableProfilerTimer || !enableProfilerCommitHooks) {
108111
return;
109112
}
110113

@@ -132,14 +135,14 @@ function recordPassiveEffectDuration(fiber: Fiber): void {
132135
}
133136

134137
function startLayoutEffectTimer(): void {
135-
if (!enableProfilerTimer) {
138+
if (!enableProfilerTimer || !enableProfilerCommitHooks) {
136139
return;
137140
}
138141
layoutEffectStartTime = now();
139142
}
140143

141144
function startPassiveEffectTimer(): void {
142-
if (!enableProfilerTimer) {
145+
if (!enableProfilerTimer || !enableProfilerCommitHooks) {
143146
return;
144147
}
145148
passiveEffectStartTime = now();

‎packages/react/src/__tests__/ReactProfiler-test.internal.js

+3
Original file line numberDiff line numberDiff line change
@@ -26,14 +26,17 @@ let resourcePromise;
2626
function loadModules({
2727
deferPassiveEffectCleanupDuringUnmount = false,
2828
enableProfilerTimer = true,
29+
enableProfilerCommitHooks = true,
2930
enableSchedulerTracing = true,
3031
replayFailedUnitOfWorkWithInvokeGuardedCallback = false,
3132
useNoopRenderer = false,
3233
} = {}) {
3334
ReactFeatureFlags = require('shared/ReactFeatureFlags');
3435
ReactFeatureFlags.debugRenderPhaseSideEffectsForStrictMode = false;
3536
ReactFeatureFlags.deferPassiveEffectCleanupDuringUnmount = deferPassiveEffectCleanupDuringUnmount;
37+
ReactFeatureFlags.runAllPassiveEffectDestroysBeforeCreates = deferPassiveEffectCleanupDuringUnmount;
3638
ReactFeatureFlags.enableProfilerTimer = enableProfilerTimer;
39+
ReactFeatureFlags.enableProfilerCommitHooks = enableProfilerCommitHooks;
3740
ReactFeatureFlags.enableSchedulerTracing = enableSchedulerTracing;
3841
ReactFeatureFlags.replayFailedUnitOfWorkWithInvokeGuardedCallback = replayFailedUnitOfWorkWithInvokeGuardedCallback;
3942

0 commit comments

Comments
 (0)