diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.js b/packages/react-reconciler/src/ReactFiberCommitWork.js index 08c7e53f83258..da7030c5d48a0 100644 --- a/packages/react-reconciler/src/ReactFiberCommitWork.js +++ b/packages/react-reconciler/src/ReactFiberCommitWork.js @@ -1283,72 +1283,44 @@ function commitPlacement(finishedWork: Fiber): void { const before = getHostSibling(finishedWork); // We only have the top Fiber that was inserted but we need to recurse down its // children to find all the terminal nodes. - if (isContainer) { - insertOrAppendPlacementNodeIntoContainer(finishedWork, before, parent); - } else { - insertOrAppendPlacementNode(finishedWork, before, parent); - } -} - -function insertOrAppendPlacementNodeIntoContainer( - node: Fiber, - before: ?Instance, - parent: Container, -): void { - const {tag} = node; - const isHost = tag === HostComponent || tag === HostText; - if (isHost || (enableFundamentalAPI && tag === FundamentalComponent)) { - const stateNode = isHost ? node.stateNode : node.stateNode.instance; - if (before) { - insertInContainerBefore(parent, stateNode, before); - } else { - appendChildToContainer(parent, stateNode); - } - } else if (tag === HostPortal) { - // If the insertion itself is a portal, then we don't want to traverse - // down its children. Instead, we'll get insertions from each child in - // the portal directly. - } else { - const child = node.child; - if (child !== null) { - insertOrAppendPlacementNodeIntoContainer(child, before, parent); - let sibling = child.sibling; - while (sibling !== null) { - insertOrAppendPlacementNodeIntoContainer(sibling, before, parent); - sibling = sibling.sibling; + let node: Fiber = finishedWork; + while (true) { + const isHost = node.tag === HostComponent || node.tag === HostText; + if (isHost || (enableFundamentalAPI && node.tag === FundamentalComponent)) { + const stateNode = isHost ? node.stateNode : node.stateNode.instance; + if (before) { + if (isContainer) { + insertInContainerBefore(parent, stateNode, before); + } else { + insertBefore(parent, stateNode, before); + } + } else { + if (isContainer) { + appendChildToContainer(parent, stateNode); + } else { + appendChild(parent, stateNode); + } } + } else if (node.tag === HostPortal) { + // If the insertion itself is a portal, then we don't want to traverse + // down its children. Instead, we'll get insertions from each child in + // the portal directly. + } else if (node.child !== null) { + node.child.return = node; + node = node.child; + continue; } - } -} - -function insertOrAppendPlacementNode( - node: Fiber, - before: ?Instance, - parent: Instance, -): void { - const {tag} = node; - const isHost = tag === HostComponent || tag === HostText; - if (isHost || (enableFundamentalAPI && tag === FundamentalComponent)) { - const stateNode = isHost ? node.stateNode : node.stateNode.instance; - if (before) { - insertBefore(parent, stateNode, before); - } else { - appendChild(parent, stateNode); + if (node === finishedWork) { + return; } - } else if (tag === HostPortal) { - // If the insertion itself is a portal, then we don't want to traverse - // down its children. Instead, we'll get insertions from each child in - // the portal directly. - } else { - const child = node.child; - if (child !== null) { - insertOrAppendPlacementNode(child, before, parent); - let sibling = child.sibling; - while (sibling !== null) { - insertOrAppendPlacementNode(sibling, before, parent); - sibling = sibling.sibling; + while (node.sibling === null) { + if (node.return === null || node.return === finishedWork) { + return; } + node = node.return; } + node.sibling.return = node.return; + node = node.sibling; } }