Skip to content

Commit f89ad29

Browse files
sammy-SCsammy-SC
committed
Skip double invoking effects in Offscreen
1 parent 7a22727 commit f89ad29

File tree

6 files changed

+265
-217
lines changed

6 files changed

+265
-217
lines changed

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

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,12 @@ import type {Fiber} from './ReactInternalTypes';
1313
import type {Lanes} from './ReactFiberLane.new';
1414

1515
import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
16-
import {Placement, ChildDeletion, Forked} from './ReactFiberFlags';
16+
import {
17+
Placement,
18+
ChildDeletion,
19+
Forked,
20+
PlacementDEV,
21+
} from './ReactFiberFlags';
1722
import {
1823
getIteratorFn,
1924
REACT_ELEMENT_TYPE,
@@ -343,15 +348,15 @@ function ChildReconciler(shouldTrackSideEffects) {
343348
const oldIndex = current.index;
344349
if (oldIndex < lastPlacedIndex) {
345350
// This is a move.
346-
newFiber.flags |= Placement;
351+
newFiber.flags |= Placement | PlacementDEV;
347352
return lastPlacedIndex;
348353
} else {
349354
// This item can stay in place.
350355
return oldIndex;
351356
}
352357
} else {
353358
// This is an insertion.
354-
newFiber.flags |= Placement;
359+
newFiber.flags |= Placement | PlacementDEV;
355360
return lastPlacedIndex;
356361
}
357362
}
@@ -360,7 +365,7 @@ function ChildReconciler(shouldTrackSideEffects) {
360365
// This is simpler for the single child case. We only need to do a
361366
// placement for inserting new children.
362367
if (shouldTrackSideEffects && newFiber.alternate === null) {
363-
newFiber.flags |= Placement;
368+
newFiber.flags |= Placement | PlacementDEV;
364369
}
365370
return newFiber;
366371
}

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

Lines changed: 35 additions & 125 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,6 @@ import {
4040
enableSchedulingProfiler,
4141
enableSuspenseCallback,
4242
enableScopeAPI,
43-
enableStrictEffects,
4443
deletedTreeCleanUpLevel,
4544
enableUpdaterTracking,
4645
enableCache,
@@ -195,6 +194,7 @@ let nextEffect: Fiber | null = null;
195194
// Used for Profiling builds to track updaters.
196195
let inProgressLanes: Lanes | null = null;
197196
let inProgressRoot: FiberRoot | null = null;
197+
let enableProfilingDEV = true;
198198

199199
export function reportUncaughtErrorInDEV(error: mixed) {
200200
// Wrapping each small part of the commit phase into a guarded
@@ -216,7 +216,8 @@ const callComponentWillUnmountWithTimer = function(current, instance) {
216216
if (
217217
enableProfilerTimer &&
218218
enableProfilerCommitHooks &&
219-
current.mode & ProfileMode
219+
current.mode & ProfileMode &&
220+
enableProfilingDEV
220221
) {
221222
try {
222223
startLayoutEffectTimer();
@@ -260,7 +261,8 @@ function safelyDetachRef(current: Fiber, nearestMountedAncestor: Fiber | null) {
260261
if (
261262
enableProfilerTimer &&
262263
enableProfilerCommitHooks &&
263-
current.mode & ProfileMode
264+
current.mode & ProfileMode &&
265+
enableProfilingDEV
264266
) {
265267
try {
266268
startLayoutEffectTimer();
@@ -637,7 +639,7 @@ export function commitPassiveEffectDurations(
637639
finishedRoot: FiberRoot,
638640
finishedWork: Fiber,
639641
): void {
640-
if (enableProfilerTimer && enableProfilerCommitHooks) {
642+
if (enableProfilerTimer && enableProfilerCommitHooks && enableProfilingDEV) {
641643
// Only Profilers with work in their subtree will have an Update effect scheduled.
642644
if ((finishedWork.flags & Update) !== NoFlags) {
643645
switch (finishedWork.tag) {
@@ -693,7 +695,8 @@ function commitHookLayoutEffects(finishedWork: Fiber, hookFlags: HookFlags) {
693695
if (
694696
enableProfilerTimer &&
695697
enableProfilerCommitHooks &&
696-
finishedWork.mode & ProfileMode
698+
finishedWork.mode & ProfileMode &&
699+
enableProfilingDEV
697700
) {
698701
try {
699702
startLayoutEffectTimer();
@@ -750,7 +753,8 @@ function commitClassLayoutLifecycles(
750753
if (
751754
enableProfilerTimer &&
752755
enableProfilerCommitHooks &&
753-
finishedWork.mode & ProfileMode
756+
finishedWork.mode & ProfileMode &&
757+
enableProfilingDEV
754758
) {
755759
try {
756760
startLayoutEffectTimer();
@@ -805,7 +809,8 @@ function commitClassLayoutLifecycles(
805809
if (
806810
enableProfilerTimer &&
807811
enableProfilerCommitHooks &&
808-
finishedWork.mode & ProfileMode
812+
finishedWork.mode & ProfileMode &&
813+
enableProfilingDEV
809814
) {
810815
try {
811816
startLayoutEffectTimer();
@@ -888,7 +893,7 @@ function commitHostComponentMount(finishedWork: Fiber) {
888893
}
889894

890895
function commitProfilerUpdate(finishedWork: Fiber, current: Fiber | null) {
891-
if (enableProfilerTimer) {
896+
if (enableProfilerTimer && enableProfilingDEV) {
892897
try {
893898
const {onCommit, onRender} = finishedWork.memoizedProps;
894899
const {effectDuration} = finishedWork.stateNode;
@@ -1335,7 +1340,8 @@ function commitAttachRef(finishedWork: Fiber) {
13351340
if (
13361341
enableProfilerTimer &&
13371342
enableProfilerCommitHooks &&
1338-
finishedWork.mode & ProfileMode
1343+
finishedWork.mode & ProfileMode &&
1344+
enableProfilingDEV
13391345
) {
13401346
try {
13411347
startLayoutEffectTimer();
@@ -1378,7 +1384,8 @@ function commitDetachRef(current: Fiber) {
13781384
if (
13791385
enableProfilerTimer &&
13801386
enableProfilerCommitHooks &&
1381-
current.mode & ProfileMode
1387+
current.mode & ProfileMode &&
1388+
enableProfilingDEV
13821389
) {
13831390
try {
13841391
startLayoutEffectTimer();
@@ -1908,7 +1915,8 @@ function commitDeletionEffectsOnFiber(
19081915
if (
19091916
enableProfilerTimer &&
19101917
enableProfilerCommitHooks &&
1911-
deletedFiber.mode & ProfileMode
1918+
deletedFiber.mode & ProfileMode &&
1919+
enableProfilingDEV
19121920
) {
19131921
startLayoutEffectTimer();
19141922
safelyCallDestroy(
@@ -2231,7 +2239,8 @@ function commitMutationEffectsOnFiber(
22312239
if (
22322240
enableProfilerTimer &&
22332241
enableProfilerCommitHooks &&
2234-
finishedWork.mode & ProfileMode
2242+
finishedWork.mode & ProfileMode &&
2243+
enableProfilingDEV
22352244
) {
22362245
try {
22372246
startLayoutEffectTimer();
@@ -2618,7 +2627,7 @@ function recursivelyTraverseLayoutEffects(
26182627
setCurrentDebugFiberInDEV(prevDebugFiber);
26192628
}
26202629

2621-
function disappearLayoutEffects(finishedWork: Fiber) {
2630+
export function disappearLayoutEffects(finishedWork: Fiber) {
26222631
switch (finishedWork.tag) {
26232632
case FunctionComponent:
26242633
case ForwardRef:
@@ -2628,7 +2637,8 @@ function disappearLayoutEffects(finishedWork: Fiber) {
26282637
if (
26292638
enableProfilerTimer &&
26302639
enableProfilerCommitHooks &&
2631-
finishedWork.mode & ProfileMode
2640+
finishedWork.mode & ProfileMode &&
2641+
enableProfilingDEV
26322642
) {
26332643
try {
26342644
startLayoutEffectTimer();
@@ -2700,7 +2710,7 @@ function recursivelyTraverseDisappearLayoutEffects(parentFiber: Fiber) {
27002710
}
27012711
}
27022712

2703-
function reappearLayoutEffects(
2713+
export function reappearLayoutEffects(
27042714
finishedRoot: FiberRoot,
27052715
current: Fiber | null,
27062716
finishedWork: Fiber,
@@ -2880,7 +2890,8 @@ function commitHookPassiveMountEffects(
28802890
if (
28812891
enableProfilerTimer &&
28822892
enableProfilerCommitHooks &&
2883-
finishedWork.mode & ProfileMode
2893+
finishedWork.mode & ProfileMode &&
2894+
enableProfilingDEV
28842895
) {
28852896
startPassiveEffectTimer();
28862897
try {
@@ -3305,7 +3316,7 @@ function recursivelyTraverseReconnectPassiveEffects(
33053316
setCurrentDebugFiberInDEV(prevDebugFiber);
33063317
}
33073318

3308-
function reconnectPassiveEffects(
3319+
export function reconnectPassiveEffects(
33093320
finishedRoot: FiberRoot,
33103321
finishedWork: Fiber,
33113322
committedLanes: Lanes,
@@ -3589,7 +3600,8 @@ function commitHookPassiveUnmountEffects(
35893600
if (
35903601
enableProfilerTimer &&
35913602
enableProfilerCommitHooks &&
3592-
finishedWork.mode & ProfileMode
3603+
finishedWork.mode & ProfileMode &&
3604+
enableProfilingDEV
35933605
) {
35943606
startPassiveEffectTimer();
35953607
commitHookEffectListUnmount(
@@ -3719,7 +3731,7 @@ function recursivelyTraverseDisconnectPassiveEffects(parentFiber: Fiber): void {
37193731
setCurrentDebugFiberInDEV(prevDebugFiber);
37203732
}
37213733

3722-
function disconnectPassiveEffect(finishedWork: Fiber): void {
3734+
export function disconnectPassiveEffect(finishedWork: Fiber): void {
37233735
switch (finishedWork.tag) {
37243736
case FunctionComponent:
37253737
case ForwardRef:
@@ -3871,112 +3883,10 @@ function commitPassiveUnmountInsideDeletedTreeOnFiber(
38713883
}
38723884
}
38733885

3874-
// TODO: Reuse reappearLayoutEffects traversal here?
3875-
function invokeLayoutEffectMountInDEV(fiber: Fiber): void {
3876-
if (__DEV__ && enableStrictEffects) {
3877-
// We don't need to re-check StrictEffectsMode here.
3878-
// This function is only called if that check has already passed.
3879-
switch (fiber.tag) {
3880-
case FunctionComponent:
3881-
case ForwardRef:
3882-
case SimpleMemoComponent: {
3883-
try {
3884-
commitHookEffectListMount(HookLayout | HookHasEffect, fiber);
3885-
} catch (error) {
3886-
captureCommitPhaseError(fiber, fiber.return, error);
3887-
}
3888-
break;
3889-
}
3890-
case ClassComponent: {
3891-
const instance = fiber.stateNode;
3892-
try {
3893-
instance.componentDidMount();
3894-
} catch (error) {
3895-
captureCommitPhaseError(fiber, fiber.return, error);
3896-
}
3897-
break;
3898-
}
3899-
}
3900-
}
3901-
}
3902-
3903-
function invokePassiveEffectMountInDEV(fiber: Fiber): void {
3904-
if (__DEV__ && enableStrictEffects) {
3905-
// We don't need to re-check StrictEffectsMode here.
3906-
// This function is only called if that check has already passed.
3907-
switch (fiber.tag) {
3908-
case FunctionComponent:
3909-
case ForwardRef:
3910-
case SimpleMemoComponent: {
3911-
try {
3912-
commitHookEffectListMount(HookPassive | HookHasEffect, fiber);
3913-
} catch (error) {
3914-
captureCommitPhaseError(fiber, fiber.return, error);
3915-
}
3916-
break;
3917-
}
3918-
}
3919-
}
3920-
}
3921-
3922-
function invokeLayoutEffectUnmountInDEV(fiber: Fiber): void {
3923-
if (__DEV__ && enableStrictEffects) {
3924-
// We don't need to re-check StrictEffectsMode here.
3925-
// This function is only called if that check has already passed.
3926-
switch (fiber.tag) {
3927-
case FunctionComponent:
3928-
case ForwardRef:
3929-
case SimpleMemoComponent: {
3930-
try {
3931-
commitHookEffectListUnmount(
3932-
HookLayout | HookHasEffect,
3933-
fiber,
3934-
fiber.return,
3935-
);
3936-
} catch (error) {
3937-
captureCommitPhaseError(fiber, fiber.return, error);
3938-
}
3939-
break;
3940-
}
3941-
case ClassComponent: {
3942-
const instance = fiber.stateNode;
3943-
if (typeof instance.componentWillUnmount === 'function') {
3944-
safelyCallComponentWillUnmount(fiber, fiber.return, instance);
3945-
}
3946-
break;
3947-
}
3948-
}
3949-
}
3950-
}
3951-
3952-
function invokePassiveEffectUnmountInDEV(fiber: Fiber): void {
3953-
if (__DEV__ && enableStrictEffects) {
3954-
// We don't need to re-check StrictEffectsMode here.
3955-
// This function is only called if that check has already passed.
3956-
switch (fiber.tag) {
3957-
case FunctionComponent:
3958-
case ForwardRef:
3959-
case SimpleMemoComponent: {
3960-
try {
3961-
commitHookEffectListUnmount(
3962-
HookPassive | HookHasEffect,
3963-
fiber,
3964-
fiber.return,
3965-
);
3966-
} catch (error) {
3967-
captureCommitPhaseError(fiber, fiber.return, error);
3968-
}
3969-
}
3970-
}
3886+
export function setEnableProfilingDEV(_enableProfilingDEV: boolean) {
3887+
if (__DEV__) {
3888+
enableProfilingDEV = _enableProfilingDEV;
39713889
}
39723890
}
39733891

3974-
export {
3975-
commitPlacement,
3976-
commitAttachRef,
3977-
commitDetachRef,
3978-
invokeLayoutEffectMountInDEV,
3979-
invokeLayoutEffectUnmountInDEV,
3980-
invokePassiveEffectMountInDEV,
3981-
invokePassiveEffectUnmountInDEV,
3982-
};
3892+
export {commitPlacement, commitAttachRef, commitDetachRef};

0 commit comments

Comments
 (0)