Skip to content

Commit

Permalink
Skip double invoking effects in Offscreen
Browse files Browse the repository at this point in the history
  • Loading branch information
@sammy-SC
sammy-SC committed Aug 11, 2022
1 parent 7a22727 commit f89ad29
Show file tree
Hide file tree
Showing 6 changed files with 265 additions and 217 deletions.
13 changes: 9 additions & 4 deletions packages/react-reconciler/src/ReactChildFiber.new.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,12 @@ import type {Fiber} from './ReactInternalTypes';
import type {Lanes} from './ReactFiberLane.new';

import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
import {Placement, ChildDeletion, Forked} from './ReactFiberFlags';
import {
Placement,
ChildDeletion,
Forked,
PlacementDEV,
} from './ReactFiberFlags';
import {
getIteratorFn,
REACT_ELEMENT_TYPE,
Expand Down Expand Up @@ -343,15 +348,15 @@ function ChildReconciler(shouldTrackSideEffects) {
const oldIndex = current.index;
if (oldIndex < lastPlacedIndex) {
// This is a move.
newFiber.flags |= Placement;
newFiber.flags |= Placement | PlacementDEV;
return lastPlacedIndex;
} else {
// This item can stay in place.
return oldIndex;
}
} else {
// This is an insertion.
newFiber.flags |= Placement;
newFiber.flags |= Placement | PlacementDEV;
return lastPlacedIndex;
}
}
Expand All @@ -360,7 +365,7 @@ function ChildReconciler(shouldTrackSideEffects) {
// This is simpler for the single child case. We only need to do a
// placement for inserting new children.
if (shouldTrackSideEffects && newFiber.alternate === null) {
newFiber.flags |= Placement;
newFiber.flags |= Placement | PlacementDEV;
}
return newFiber;
}
Expand Down
160 changes: 35 additions & 125 deletions packages/react-reconciler/src/ReactFiberCommitWork.new.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,6 @@ import {
enableSchedulingProfiler,
enableSuspenseCallback,
enableScopeAPI,
enableStrictEffects,
deletedTreeCleanUpLevel,
enableUpdaterTracking,
enableCache,
Expand Down Expand Up @@ -195,6 +194,7 @@ let nextEffect: Fiber | null = null;
// Used for Profiling builds to track updaters.
let inProgressLanes: Lanes | null = null;
let inProgressRoot: FiberRoot | null = null;
let enableProfilingDEV = true;

export function reportUncaughtErrorInDEV(error: mixed) {
// Wrapping each small part of the commit phase into a guarded
Expand All @@ -216,7 +216,8 @@ const callComponentWillUnmountWithTimer = function(current, instance) {
if (
enableProfilerTimer &&
enableProfilerCommitHooks &&
current.mode & ProfileMode
current.mode & ProfileMode &&
enableProfilingDEV
) {
try {
startLayoutEffectTimer();
Expand Down Expand Up @@ -260,7 +261,8 @@ function safelyDetachRef(current: Fiber, nearestMountedAncestor: Fiber | null) {
if (
enableProfilerTimer &&
enableProfilerCommitHooks &&
current.mode & ProfileMode
current.mode & ProfileMode &&
enableProfilingDEV
) {
try {
startLayoutEffectTimer();
Expand Down Expand Up @@ -637,7 +639,7 @@ export function commitPassiveEffectDurations(
finishedRoot: FiberRoot,
finishedWork: Fiber,
): void {
if (enableProfilerTimer && enableProfilerCommitHooks) {
if (enableProfilerTimer && enableProfilerCommitHooks && enableProfilingDEV) {
// Only Profilers with work in their subtree will have an Update effect scheduled.
if ((finishedWork.flags & Update) !== NoFlags) {
switch (finishedWork.tag) {
Expand Down Expand Up @@ -693,7 +695,8 @@ function commitHookLayoutEffects(finishedWork: Fiber, hookFlags: HookFlags) {
if (
enableProfilerTimer &&
enableProfilerCommitHooks &&
finishedWork.mode & ProfileMode
finishedWork.mode & ProfileMode &&
enableProfilingDEV
) {
try {
startLayoutEffectTimer();
Expand Down Expand Up @@ -750,7 +753,8 @@ function commitClassLayoutLifecycles(
if (
enableProfilerTimer &&
enableProfilerCommitHooks &&
finishedWork.mode & ProfileMode
finishedWork.mode & ProfileMode &&
enableProfilingDEV
) {
try {
startLayoutEffectTimer();
Expand Down Expand Up @@ -805,7 +809,8 @@ function commitClassLayoutLifecycles(
if (
enableProfilerTimer &&
enableProfilerCommitHooks &&
finishedWork.mode & ProfileMode
finishedWork.mode & ProfileMode &&
enableProfilingDEV
) {
try {
startLayoutEffectTimer();
Expand Down Expand Up @@ -888,7 +893,7 @@ function commitHostComponentMount(finishedWork: Fiber) {
}

function commitProfilerUpdate(finishedWork: Fiber, current: Fiber | null) {
if (enableProfilerTimer) {
if (enableProfilerTimer && enableProfilingDEV) {
try {
const {onCommit, onRender} = finishedWork.memoizedProps;
const {effectDuration} = finishedWork.stateNode;
Expand Down Expand Up @@ -1335,7 +1340,8 @@ function commitAttachRef(finishedWork: Fiber) {
if (
enableProfilerTimer &&
enableProfilerCommitHooks &&
finishedWork.mode & ProfileMode
finishedWork.mode & ProfileMode &&
enableProfilingDEV
) {
try {
startLayoutEffectTimer();
Expand Down Expand Up @@ -1378,7 +1384,8 @@ function commitDetachRef(current: Fiber) {
if (
enableProfilerTimer &&
enableProfilerCommitHooks &&
current.mode & ProfileMode
current.mode & ProfileMode &&
enableProfilingDEV
) {
try {
startLayoutEffectTimer();
Expand Down Expand Up @@ -1908,7 +1915,8 @@ function commitDeletionEffectsOnFiber(
if (
enableProfilerTimer &&
enableProfilerCommitHooks &&
deletedFiber.mode & ProfileMode
deletedFiber.mode & ProfileMode &&
enableProfilingDEV
) {
startLayoutEffectTimer();
safelyCallDestroy(
Expand Down Expand Up @@ -2231,7 +2239,8 @@ function commitMutationEffectsOnFiber(
if (
enableProfilerTimer &&
enableProfilerCommitHooks &&
finishedWork.mode & ProfileMode
finishedWork.mode & ProfileMode &&
enableProfilingDEV
) {
try {
startLayoutEffectTimer();
Expand Down Expand Up @@ -2618,7 +2627,7 @@ function recursivelyTraverseLayoutEffects(
setCurrentDebugFiberInDEV(prevDebugFiber);
}

function disappearLayoutEffects(finishedWork: Fiber) {
export function disappearLayoutEffects(finishedWork: Fiber) {
switch (finishedWork.tag) {
case FunctionComponent:
case ForwardRef:
Expand All @@ -2628,7 +2637,8 @@ function disappearLayoutEffects(finishedWork: Fiber) {
if (
enableProfilerTimer &&
enableProfilerCommitHooks &&
finishedWork.mode & ProfileMode
finishedWork.mode & ProfileMode &&
enableProfilingDEV
) {
try {
startLayoutEffectTimer();
Expand Down Expand Up @@ -2700,7 +2710,7 @@ function recursivelyTraverseDisappearLayoutEffects(parentFiber: Fiber) {
}
}

function reappearLayoutEffects(
export function reappearLayoutEffects(
finishedRoot: FiberRoot,
current: Fiber | null,
finishedWork: Fiber,
Expand Down Expand Up @@ -2880,7 +2890,8 @@ function commitHookPassiveMountEffects(
if (
enableProfilerTimer &&
enableProfilerCommitHooks &&
finishedWork.mode & ProfileMode
finishedWork.mode & ProfileMode &&
enableProfilingDEV
) {
startPassiveEffectTimer();
try {
Expand Down Expand Up @@ -3305,7 +3316,7 @@ function recursivelyTraverseReconnectPassiveEffects(
setCurrentDebugFiberInDEV(prevDebugFiber);
}

function reconnectPassiveEffects(
export function reconnectPassiveEffects(
finishedRoot: FiberRoot,
finishedWork: Fiber,
committedLanes: Lanes,
Expand Down Expand Up @@ -3589,7 +3600,8 @@ function commitHookPassiveUnmountEffects(
if (
enableProfilerTimer &&
enableProfilerCommitHooks &&
finishedWork.mode & ProfileMode
finishedWork.mode & ProfileMode &&
enableProfilingDEV
) {
startPassiveEffectTimer();
commitHookEffectListUnmount(
Expand Down Expand Up @@ -3719,7 +3731,7 @@ function recursivelyTraverseDisconnectPassiveEffects(parentFiber: Fiber): void {
setCurrentDebugFiberInDEV(prevDebugFiber);
}

function disconnectPassiveEffect(finishedWork: Fiber): void {
export function disconnectPassiveEffect(finishedWork: Fiber): void {
switch (finishedWork.tag) {
case FunctionComponent:
case ForwardRef:
Expand Down Expand Up @@ -3871,112 +3883,10 @@ function commitPassiveUnmountInsideDeletedTreeOnFiber(
}
}

// TODO: Reuse reappearLayoutEffects traversal here?
function invokeLayoutEffectMountInDEV(fiber: Fiber): void {
if (__DEV__ && enableStrictEffects) {
// We don't need to re-check StrictEffectsMode here.
// This function is only called if that check has already passed.
switch (fiber.tag) {
case FunctionComponent:
case ForwardRef:
case SimpleMemoComponent: {
try {
commitHookEffectListMount(HookLayout | HookHasEffect, fiber);
} catch (error) {
captureCommitPhaseError(fiber, fiber.return, error);
}
break;
}
case ClassComponent: {
const instance = fiber.stateNode;
try {
instance.componentDidMount();
} catch (error) {
captureCommitPhaseError(fiber, fiber.return, error);
}
break;
}
}
}
}

function invokePassiveEffectMountInDEV(fiber: Fiber): void {
if (__DEV__ && enableStrictEffects) {
// We don't need to re-check StrictEffectsMode here.
// This function is only called if that check has already passed.
switch (fiber.tag) {
case FunctionComponent:
case ForwardRef:
case SimpleMemoComponent: {
try {
commitHookEffectListMount(HookPassive | HookHasEffect, fiber);
} catch (error) {
captureCommitPhaseError(fiber, fiber.return, error);
}
break;
}
}
}
}

function invokeLayoutEffectUnmountInDEV(fiber: Fiber): void {
if (__DEV__ && enableStrictEffects) {
// We don't need to re-check StrictEffectsMode here.
// This function is only called if that check has already passed.
switch (fiber.tag) {
case FunctionComponent:
case ForwardRef:
case SimpleMemoComponent: {
try {
commitHookEffectListUnmount(
HookLayout | HookHasEffect,
fiber,
fiber.return,
);
} catch (error) {
captureCommitPhaseError(fiber, fiber.return, error);
}
break;
}
case ClassComponent: {
const instance = fiber.stateNode;
if (typeof instance.componentWillUnmount === 'function') {
safelyCallComponentWillUnmount(fiber, fiber.return, instance);
}
break;
}
}
}
}

function invokePassiveEffectUnmountInDEV(fiber: Fiber): void {
if (__DEV__ && enableStrictEffects) {
// We don't need to re-check StrictEffectsMode here.
// This function is only called if that check has already passed.
switch (fiber.tag) {
case FunctionComponent:
case ForwardRef:
case SimpleMemoComponent: {
try {
commitHookEffectListUnmount(
HookPassive | HookHasEffect,
fiber,
fiber.return,
);
} catch (error) {
captureCommitPhaseError(fiber, fiber.return, error);
}
}
}
export function setEnableProfilingDEV(_enableProfilingDEV: boolean) {
if (__DEV__) {
enableProfilingDEV = _enableProfilingDEV;
}
}

export {
commitPlacement,
commitAttachRef,
commitDetachRef,
invokeLayoutEffectMountInDEV,
invokeLayoutEffectUnmountInDEV,
invokePassiveEffectMountInDEV,
invokePassiveEffectUnmountInDEV,
};
export {commitPlacement, commitAttachRef, commitDetachRef};
Loading

0 comments on commit f89ad29

Please sign in to comment.