From 997e55ad9a34bfc327fc4009b5b1e2ed12efcf2d Mon Sep 17 00:00:00 2001 From: Brian Vaughn Date: Fri, 25 Sep 2020 12:59:37 -0400 Subject: [PATCH] Lifted commit layout switch/case to the outer recursive function And split the per-tag-type logic into separate helper functions. This keeps all of the tag checks on the same level but requires repeating the try/catch block (or invokeGuardedCallback) in each case before calling user code that might throw. --- .../src/ReactFiberCommitWork.new.js | 816 +++++++++++------- .../src/ReactFiberWorkLoop.new.js | 2 +- 2 files changed, 490 insertions(+), 328 deletions(-) diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js index 2416dcc5b15b6..c9b11f594f0be 100644 --- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js +++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js @@ -17,7 +17,6 @@ import type { } from './ReactFiberHostConfig'; import type {Fiber} from './ReactInternalTypes'; import type {FiberRoot} from './ReactInternalTypes'; -import type {Lanes} from './ReactFiberLane'; import type {SuspenseState} from './ReactFiberSuspenseComponent.new'; import type {UpdateQueue} from './ReactUpdateQueue.new'; import type {FunctionComponentUpdateQueue} from './ReactFiberHooks.new'; @@ -442,10 +441,10 @@ function commitProfilerPassiveEffect( function recursivelyCommitLayoutEffects( finishedWork: Fiber, - root: FiberRoot, - committedLanes: Lanes, + finishedRoot: FiberRoot, ) { - switch (finishedWork.tag) { + const {flags, tag} = finishedWork; + switch (tag) { case Profiler: { let prevProfilerOnStack = null; if (enableProfilerTimer && enableProfilerCommitHooks) { @@ -458,31 +457,35 @@ function recursivelyCommitLayoutEffects( const primaryFlags = child.flags & LayoutMask; const primarySubtreeFlags = child.subtreeFlags & LayoutMask; if (primaryFlags !== NoFlags || primarySubtreeFlags !== NoFlags) { - recursivelyCommitLayoutEffects(child, root, committedLanes); + recursivelyCommitLayoutEffects(child, finishedRoot); } child = child.sibling; } - if (__DEV__) { - setCurrentDebugFiberInDEV(finishedWork); - invokeGuardedCallback( - null, - commitLayoutEffectsForFiber, - null, - finishedWork, - root, - committedLanes, - ); - if (hasCaughtError()) { - const error = clearCaughtError(); - captureCommitPhaseError(finishedWork, finishedWork.return, error); - } - resetCurrentDebugFiberInDEV(); - } else { - try { - commitLayoutEffectsForFiber(finishedWork, root, committedLanes); - } catch (error) { - captureCommitPhaseError(finishedWork, finishedWork.return, error); + const primaryFlags = flags & (Update | Callback); + if (primaryFlags !== NoFlags) { + if (enableProfilerTimer) { + if (__DEV__) { + setCurrentDebugFiberInDEV(finishedWork); + invokeGuardedCallback( + null, + commitLayoutEffectsForProfiler, + null, + finishedWork, + finishedRoot, + ); + if (hasCaughtError()) { + const error = clearCaughtError(); + captureCommitPhaseError(finishedWork, finishedWork.return, error); + } + resetCurrentDebugFiberInDEV(); + } else { + try { + commitLayoutEffectsForProfiler(finishedWork, finishedRoot); + } catch (error) { + captureCommitPhaseError(finishedWork, finishedWork.return, error); + } + } } } @@ -510,109 +513,22 @@ function recursivelyCommitLayoutEffects( const primaryFlags = child.flags & LayoutMask; const primarySubtreeFlags = child.subtreeFlags & LayoutMask; if (primaryFlags !== NoFlags || primarySubtreeFlags !== NoFlags) { - recursivelyCommitLayoutEffects(child, root, committedLanes); + recursivelyCommitLayoutEffects(child, finishedRoot); } child = child.sibling; } - if (__DEV__) { - setCurrentDebugFiberInDEV(finishedWork); - invokeGuardedCallback( - null, - commitLayoutEffectsForFiber, - null, - finishedWork, - root, - committedLanes, - ); - if (hasCaughtError()) { - const error = clearCaughtError(); - captureCommitPhaseError(finishedWork, finishedWork.return, error); - } - resetCurrentDebugFiberInDEV(); - } else { - try { - commitLayoutEffectsForFiber(finishedWork, root, committedLanes); - } catch (error) { - captureCommitPhaseError(finishedWork, finishedWork.return, error); - } - } - break; - } - } -} - -function commitLayoutEffectsForFiber( - finishedWork: Fiber, - finishedRoot: FiberRoot, - committedLanes: Lanes, -) { - const {alternate: current, flags, tag} = finishedWork; - - if (flags & (Update | Callback)) { - switch (tag) { - case FunctionComponent: - case ForwardRef: - case SimpleMemoComponent: - case Block: { - // At this point layout effects have already been destroyed (during mutation phase). - // This is done to prevent sibling component effects from interfering with each other, - // e.g. a destroy function in one component should never override a ref set - // by a create function in another component during the same commit. - if ( - enableProfilerTimer && - enableProfilerCommitHooks && - finishedWork.mode & ProfileMode - ) { - try { - startLayoutEffectTimer(); - commitHookEffectListMount(HookLayout | HookHasEffect, finishedWork); - } finally { - recordLayoutEffectDuration(finishedWork); - } - } else { - commitHookEffectListMount(HookLayout | HookHasEffect, finishedWork); + const primaryFlags = flags & (Update | Callback); + if (primaryFlags !== NoFlags) { + if (__DEV__) { + setCurrentDebugFiberInDEV(finishedWork); } - if ((finishedWork.subtreeFlags & PassiveMask) !== NoFlags) { - schedulePassiveEffectCallback(); - } - break; - } - case ClassComponent: { - const instance = finishedWork.stateNode; - if (flags & Update) { - if (current === null) { - // We could update instance props and state here, - // but instead we rely on them being set during last render. - // TODO: revisit this when we implement resuming. - if (__DEV__) { - if ( - finishedWork.type === finishedWork.elementType && - !didWarnAboutReassigningProps - ) { - if (instance.props !== finishedWork.memoizedProps) { - console.error( - 'Expected %s props to match memoized props before ' + - 'componentDidMount. ' + - 'This might either be because of a bug in React, or because ' + - 'a component reassigns its own `this.props`. ' + - 'Please file an issue.', - getComponentName(finishedWork.type) || 'instance', - ); - } - if (instance.state !== finishedWork.memoizedState) { - console.error( - 'Expected %s state to match memoized state before ' + - 'componentDidMount. ' + - 'This might either be because of a bug in React, or because ' + - 'a component reassigns its own `this.state`. ' + - 'Please file an issue.', - getComponentName(finishedWork.type) || 'instance', - ); - } - } - } + switch (tag) { + case FunctionComponent: + case ForwardRef: + case SimpleMemoComponent: + case Block: { if ( enableProfilerTimer && enableProfilerCommitHooks && @@ -620,251 +536,497 @@ function commitLayoutEffectsForFiber( ) { try { startLayoutEffectTimer(); - instance.componentDidMount(); + + if (__DEV__) { + invokeGuardedCallback( + null, + commitHookEffectListMount, + null, + HookLayout | HookHasEffect, + finishedWork, + ); + if (hasCaughtError()) { + const error = clearCaughtError(); + captureCommitPhaseError( + finishedWork, + finishedWork.return, + error, + ); + } + resetCurrentDebugFiberInDEV(); + } else { + try { + commitHookEffectListMount( + HookLayout | HookHasEffect, + finishedWork, + ); + } catch (error) { + captureCommitPhaseError( + finishedWork, + finishedWork.return, + error, + ); + } + } } finally { recordLayoutEffectDuration(finishedWork); } } else { - instance.componentDidMount(); - } - } else { - const prevProps = - finishedWork.elementType === finishedWork.type - ? current.memoizedProps - : resolveDefaultProps(finishedWork.type, current.memoizedProps); - const prevState = current.memoizedState; - // We could update instance props and state here, - // but instead we rely on them being set during last render. - // TODO: revisit this when we implement resuming. - if (__DEV__) { - if ( - finishedWork.type === finishedWork.elementType && - !didWarnAboutReassigningProps - ) { - if (instance.props !== finishedWork.memoizedProps) { - console.error( - 'Expected %s props to match memoized props before ' + - 'componentDidUpdate. ' + - 'This might either be because of a bug in React, or because ' + - 'a component reassigns its own `this.props`. ' + - 'Please file an issue.', - getComponentName(finishedWork.type) || 'instance', + if (__DEV__) { + invokeGuardedCallback( + null, + commitHookEffectListMount, + null, + HookLayout | HookHasEffect, + finishedWork, + ); + if (hasCaughtError()) { + const error = clearCaughtError(); + captureCommitPhaseError( + finishedWork, + finishedWork.return, + error, ); } - if (instance.state !== finishedWork.memoizedState) { - console.error( - 'Expected %s state to match memoized state before ' + - 'componentDidUpdate. ' + - 'This might either be because of a bug in React, or because ' + - 'a component reassigns its own `this.state`. ' + - 'Please file an issue.', - getComponentName(finishedWork.type) || 'instance', + resetCurrentDebugFiberInDEV(); + } else { + try { + commitHookEffectListMount( + HookLayout | HookHasEffect, + finishedWork, + ); + } catch (error) { + captureCommitPhaseError( + finishedWork, + finishedWork.return, + error, ); } } } - if ( - enableProfilerTimer && - enableProfilerCommitHooks && - finishedWork.mode & ProfileMode - ) { - try { - startLayoutEffectTimer(); - instance.componentDidUpdate( - prevProps, - prevState, - instance.__reactInternalSnapshotBeforeUpdate, + + if ((finishedWork.subtreeFlags & PassiveMask) !== NoFlags) { + schedulePassiveEffectCallback(); + } + break; + } + case ClassComponent: { + if (__DEV__) { + invokeGuardedCallback( + null, + commitLayoutEffectsForClassComponent, + null, + finishedWork, + ); + if (hasCaughtError()) { + const error = clearCaughtError(); + captureCommitPhaseError( + finishedWork, + finishedWork.return, + error, ); - } finally { - recordLayoutEffectDuration(finishedWork); } + resetCurrentDebugFiberInDEV(); } else { - instance.componentDidUpdate( - prevProps, - prevState, - instance.__reactInternalSnapshotBeforeUpdate, - ); + try { + commitLayoutEffectsForClassComponent(finishedWork); + } catch (error) { + captureCommitPhaseError( + finishedWork, + finishedWork.return, + error, + ); + } } + break; } - } - - // TODO: I think this is now always non-null by the time it reaches the - // commit phase. Consider removing the type check. - const updateQueue: UpdateQueue< - *, - > | null = (finishedWork.updateQueue: any); - if (updateQueue !== null) { - if (__DEV__) { - if ( - finishedWork.type === finishedWork.elementType && - !didWarnAboutReassigningProps - ) { - if (instance.props !== finishedWork.memoizedProps) { - console.error( - 'Expected %s props to match memoized props before ' + - 'processing the update queue. ' + - 'This might either be because of a bug in React, or because ' + - 'a component reassigns its own `this.props`. ' + - 'Please file an issue.', - getComponentName(finishedWork.type) || 'instance', + case HostRoot: { + if (__DEV__) { + invokeGuardedCallback( + null, + commitLayoutEffectsForHostRoot, + null, + finishedWork, + ); + if (hasCaughtError()) { + const error = clearCaughtError(); + captureCommitPhaseError( + finishedWork, + finishedWork.return, + error, ); } - if (instance.state !== finishedWork.memoizedState) { - console.error( - 'Expected %s state to match memoized state before ' + - 'processing the update queue. ' + - 'This might either be because of a bug in React, or because ' + - 'a component reassigns its own `this.state`. ' + - 'Please file an issue.', - getComponentName(finishedWork.type) || 'instance', + resetCurrentDebugFiberInDEV(); + } else { + try { + commitLayoutEffectsForHostRoot(finishedWork); + } catch (error) { + captureCommitPhaseError( + finishedWork, + finishedWork.return, + error, ); } } + break; } - // We could update instance props and state here, - // but instead we rely on them being set during last render. - // TODO: revisit this when we implement resuming. - commitUpdateQueue(finishedWork, updateQueue, instance); - } - break; - } - case HostRoot: { - // TODO: I think this is now always non-null by the time it reaches the - // commit phase. Consider removing the type check. - const updateQueue: UpdateQueue< - *, - > | null = (finishedWork.updateQueue: any); - if (updateQueue !== null) { - let instance = null; - if (finishedWork.child !== null) { - switch (finishedWork.child.tag) { - case HostComponent: - instance = getPublicInstance(finishedWork.child.stateNode); - break; - case ClassComponent: - instance = finishedWork.child.stateNode; - break; - } - } - commitUpdateQueue(finishedWork, updateQueue, instance); - } - break; - } - case HostComponent: { - const instance: Instance = finishedWork.stateNode; - - // Renderers may schedule work to be done after host components are mounted - // (eg DOM renderer may schedule auto-focus for inputs and form controls). - // These effects should only be committed when components are first mounted, - // aka when there is no current/alternate. - if (current === null && flags & Update) { - const type = finishedWork.type; - const props = finishedWork.memoizedProps; - commitMount(instance, type, props, finishedWork); - } - - break; - } - case HostText: { - // We have no life-cycles associated with text. - break; - } - case HostPortal: { - // We have no life-cycles associated with portals. - break; - } - case Profiler: { - if (enableProfilerTimer) { - const {onCommit, onRender} = finishedWork.memoizedProps; - const {effectDuration} = finishedWork.stateNode; - - const commitTime = getCommitTime(); - - const OnRenderFlag = Update; - const OnCommitFlag = Callback; - - if ( - (flags & OnRenderFlag) !== NoFlags && - typeof onRender === 'function' - ) { - if (enableSchedulerTracing) { - onRender( - finishedWork.memoizedProps.id, - current === null ? 'mount' : 'update', - finishedWork.actualDuration, - finishedWork.treeBaseDuration, - finishedWork.actualStartTime, - commitTime, - finishedRoot.memoizedInteractions, + case HostComponent: { + if (__DEV__) { + invokeGuardedCallback( + null, + commitLayoutEffectsForHostComponent, + null, + finishedWork, ); + if (hasCaughtError()) { + const error = clearCaughtError(); + captureCommitPhaseError( + finishedWork, + finishedWork.return, + error, + ); + } + resetCurrentDebugFiberInDEV(); } else { - onRender( - finishedWork.memoizedProps.id, - current === null ? 'mount' : 'update', - finishedWork.actualDuration, - finishedWork.treeBaseDuration, - finishedWork.actualStartTime, - commitTime, - ); + try { + commitLayoutEffectsForHostComponent(finishedWork); + } catch (error) { + captureCommitPhaseError( + finishedWork, + finishedWork.return, + error, + ); + } } + break; } - - if (enableProfilerCommitHooks) { - if ( - (flags & OnCommitFlag) !== NoFlags && - typeof onCommit === 'function' - ) { - if (enableSchedulerTracing) { - onCommit( - finishedWork.memoizedProps.id, - current === null ? 'mount' : 'update', - effectDuration, - commitTime, - finishedRoot.memoizedInteractions, + case HostText: { + // We have no life-cycles associated with text. + break; + } + case HostPortal: { + // We have no life-cycles associated with portals. + break; + } + case SuspenseComponent: { + if (__DEV__) { + invokeGuardedCallback( + null, + commitSuspenseHydrationCallbacks, + null, + finishedRoot, + finishedWork, + ); + if (hasCaughtError()) { + const error = clearCaughtError(); + captureCommitPhaseError( + finishedWork, + finishedWork.return, + error, ); - } else { - onCommit( - finishedWork.memoizedProps.id, - current === null ? 'mount' : 'update', - effectDuration, - commitTime, + } + resetCurrentDebugFiberInDEV(); + } else { + try { + commitSuspenseHydrationCallbacks(finishedRoot, finishedWork); + } catch (error) { + captureCommitPhaseError( + finishedWork, + finishedWork.return, + error, ); } } + break; } + case SuspenseListComponent: + case IncompleteClassComponent: + case FundamentalComponent: + case ScopeComponent: + case OffscreenComponent: + case LegacyHiddenComponent: + break; + + default: + invariant( + false, + 'This unit of work tag should not have side-effects. This error is ' + + 'likely caused by a bug in React. Please file an issue.', + ); } - break; } - case SuspenseComponent: { - commitSuspenseHydrationCallbacks(finishedRoot, finishedWork); - break; + break; + } + } + + if ( + (flags & Ref) !== NoFlags && + // TODO: This is a temporary solution that allowed us to transition away from React Flare on www. + (!enableScopeAPI || tag !== ScopeComponent) + ) { + if (__DEV__) { + setCurrentDebugFiberInDEV(finishedWork); + invokeGuardedCallback(null, commitAttachRef, null, finishedWork); + if (hasCaughtError()) { + const error = clearCaughtError(); + captureCommitPhaseError(finishedWork, finishedWork.return, error); + } + resetCurrentDebugFiberInDEV(); + } else { + try { + commitAttachRef(finishedWork); + } catch (error) { + captureCommitPhaseError(finishedWork, finishedWork.return, error); } - case SuspenseListComponent: - case IncompleteClassComponent: - case FundamentalComponent: - case ScopeComponent: - case OffscreenComponent: - case LegacyHiddenComponent: - break; + } + } +} - default: - invariant( - false, - 'This unit of work tag should not have side-effects. This error is ' + - 'likely caused by a bug in React. Please file an issue.', +function commitLayoutEffectsForProfiler( + finishedWork: Fiber, + finishedRoot: FiberRoot, +) { + if (enableProfilerTimer) { + const flags = finishedWork.flags; + const current = finishedWork.alternate; + + const {onCommit, onRender} = finishedWork.memoizedProps; + const {effectDuration} = finishedWork.stateNode; + + const commitTime = getCommitTime(); + + const OnRenderFlag = Update; + const OnCommitFlag = Callback; + + if ((flags & OnRenderFlag) !== NoFlags && typeof onRender === 'function') { + if (enableSchedulerTracing) { + onRender( + finishedWork.memoizedProps.id, + current === null ? 'mount' : 'update', + finishedWork.actualDuration, + finishedWork.treeBaseDuration, + finishedWork.actualStartTime, + commitTime, + finishedRoot.memoizedInteractions, ); + } else { + onRender( + finishedWork.memoizedProps.id, + current === null ? 'mount' : 'update', + finishedWork.actualDuration, + finishedWork.treeBaseDuration, + finishedWork.actualStartTime, + commitTime, + ); + } + } + + if (enableProfilerCommitHooks) { + if ( + (flags & OnCommitFlag) !== NoFlags && + typeof onCommit === 'function' + ) { + if (enableSchedulerTracing) { + onCommit( + finishedWork.memoizedProps.id, + current === null ? 'mount' : 'update', + effectDuration, + commitTime, + finishedRoot.memoizedInteractions, + ); + } else { + onCommit( + finishedWork.memoizedProps.id, + current === null ? 'mount' : 'update', + effectDuration, + commitTime, + ); + } + } } } +} - if (enableScopeAPI) { - // TODO: This is a temporary solution that allowed us to transition away from React Flare on www. - if (flags & Ref && tag !== ScopeComponent) { - commitAttachRef(finishedWork); +function commitLayoutEffectsForClassComponent(finishedWork: Fiber) { + const instance = finishedWork.stateNode; + const current = finishedWork.alternate; + if (finishedWork.flags & Update) { + if (current === null) { + // We could update instance props and state here, + // but instead we rely on them being set during last render. + // TODO: revisit this when we implement resuming. + if (__DEV__) { + if ( + finishedWork.type === finishedWork.elementType && + !didWarnAboutReassigningProps + ) { + if (instance.props !== finishedWork.memoizedProps) { + console.error( + 'Expected %s props to match memoized props before ' + + 'componentDidMount. ' + + 'This might either be because of a bug in React, or because ' + + 'a component reassigns its own `this.props`. ' + + 'Please file an issue.', + getComponentName(finishedWork.type) || 'instance', + ); + } + if (instance.state !== finishedWork.memoizedState) { + console.error( + 'Expected %s state to match memoized state before ' + + 'componentDidMount. ' + + 'This might either be because of a bug in React, or because ' + + 'a component reassigns its own `this.state`. ' + + 'Please file an issue.', + getComponentName(finishedWork.type) || 'instance', + ); + } + } + } + if ( + enableProfilerTimer && + enableProfilerCommitHooks && + finishedWork.mode & ProfileMode + ) { + try { + startLayoutEffectTimer(); + instance.componentDidMount(); + } finally { + recordLayoutEffectDuration(finishedWork); + } + } else { + instance.componentDidMount(); + } + } else { + const prevProps = + finishedWork.elementType === finishedWork.type + ? current.memoizedProps + : resolveDefaultProps(finishedWork.type, current.memoizedProps); + const prevState = current.memoizedState; + // We could update instance props and state here, + // but instead we rely on them being set during last render. + // TODO: revisit this when we implement resuming. + if (__DEV__) { + if ( + finishedWork.type === finishedWork.elementType && + !didWarnAboutReassigningProps + ) { + if (instance.props !== finishedWork.memoizedProps) { + console.error( + 'Expected %s props to match memoized props before ' + + 'componentDidUpdate. ' + + 'This might either be because of a bug in React, or because ' + + 'a component reassigns its own `this.props`. ' + + 'Please file an issue.', + getComponentName(finishedWork.type) || 'instance', + ); + } + if (instance.state !== finishedWork.memoizedState) { + console.error( + 'Expected %s state to match memoized state before ' + + 'componentDidUpdate. ' + + 'This might either be because of a bug in React, or because ' + + 'a component reassigns its own `this.state`. ' + + 'Please file an issue.', + getComponentName(finishedWork.type) || 'instance', + ); + } + } + } + if ( + enableProfilerTimer && + enableProfilerCommitHooks && + finishedWork.mode & ProfileMode + ) { + try { + startLayoutEffectTimer(); + instance.componentDidUpdate( + prevProps, + prevState, + instance.__reactInternalSnapshotBeforeUpdate, + ); + } finally { + recordLayoutEffectDuration(finishedWork); + } + } else { + instance.componentDidUpdate( + prevProps, + prevState, + instance.__reactInternalSnapshotBeforeUpdate, + ); + } } - } else { - if (flags & Ref) { - commitAttachRef(finishedWork); + } + + // TODO: I think this is now always non-null by the time it reaches the + // commit phase. Consider removing the type check. + const updateQueue: UpdateQueue<*> | null = (finishedWork.updateQueue: any); + if (updateQueue !== null) { + if (__DEV__) { + if ( + finishedWork.type === finishedWork.elementType && + !didWarnAboutReassigningProps + ) { + if (instance.props !== finishedWork.memoizedProps) { + console.error( + 'Expected %s props to match memoized props before ' + + 'processing the update queue. ' + + 'This might either be because of a bug in React, or because ' + + 'a component reassigns its own `this.props`. ' + + 'Please file an issue.', + getComponentName(finishedWork.type) || 'instance', + ); + } + if (instance.state !== finishedWork.memoizedState) { + console.error( + 'Expected %s state to match memoized state before ' + + 'processing the update queue. ' + + 'This might either be because of a bug in React, or because ' + + 'a component reassigns its own `this.state`. ' + + 'Please file an issue.', + getComponentName(finishedWork.type) || 'instance', + ); + } + } } + // We could update instance props and state here, + // but instead we rely on them being set during last render. + // TODO: revisit this when we implement resuming. + commitUpdateQueue(finishedWork, updateQueue, instance); + } +} + +function commitLayoutEffectsForHostRoot(finishedWork: Fiber) { + // TODO: I think this is now always non-null by the time it reaches the + // commit phase. Consider removing the type check. + const updateQueue: UpdateQueue<*> | null = (finishedWork.updateQueue: any); + if (updateQueue !== null) { + let instance = null; + if (finishedWork.child !== null) { + switch (finishedWork.child.tag) { + case HostComponent: + instance = getPublicInstance(finishedWork.child.stateNode); + break; + case ClassComponent: + instance = finishedWork.child.stateNode; + break; + } + } + commitUpdateQueue(finishedWork, updateQueue, instance); + } +} + +function commitLayoutEffectsForHostComponent(finishedWork: Fiber) { + const instance: Instance = finishedWork.stateNode; + const current = finishedWork.alternate; + + // Renderers may schedule work to be done after host components are mounted + // (eg DOM renderer may schedule auto-focus for inputs and form controls). + // These effects should only be committed when components are first mounted, + // aka when there is no current/alternate. + if (current === null && finishedWork.flags & Update) { + const type = finishedWork.type; + const props = finishedWork.memoizedProps; + commitMount(instance, type, props, finishedWork); } } diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js index 4997f059b57ee..1087edb043d37 100644 --- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js +++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js @@ -1954,7 +1954,7 @@ function commitRootImpl(root, renderPriorityLevel) { markLayoutEffectsStarted(lanes); } - recursivelyCommitLayoutEffects(finishedWork, root, lanes); + recursivelyCommitLayoutEffects(finishedWork, root); if (__DEV__) { if (enableDebugTracing) {