Refactor commitPlacement to recursively insert nodes (#17996)

packages/react-dom/src/client/ReactDOMHostConfig.js

@@ -88,7 +88,7 @@ export type EventTargetChildElement = {
  },
  ...
 };
-export type Container = Element | Document;
+export type Container = DOMContainer;
 export type Instance = Element;
 export type TextInstance = Text;
 export type SuspenseInstance = Comment & {_reactRetry?: () => void, ...};

packages/react-reconciler/src/ReactFiberCommitWork.js

@@ -1099,44 +1099,72 @@ 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.
- 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);
- }
+ 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;
  }
- } 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;
  }
- if (node === finishedWork) {
- return;
+ }
+}
+
+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);
  }
- while (node.sibling === null) {
- if (node.return === null || node.return === 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;
  }
- node = node.return;
  }
- node.sibling.return = node.return;
- node = node.sibling;
  }
 }