commitAllWork() now

reconciler.js

function performWork(deadline) {
  // ...code
  if (pendingCommit) {
    commitAllWork(pendingCommit);
  }
}

function commitAllWork(fiber) {
  // this fiber has all the effects of the entire tree
  fiber.effects.forEach(f => {
    commitWork(f);
  });
  // the wipFiber becomes the currentFiber
  fiber.stateNode._rootContainerFiber = fiber;
  nextUnitOfWork = null; // no work is left to be done
  pendingCommit = null; // we have just flushed the changes to the dom.
}

function commitWork(fiber) {
  if (fiber.tag == HOST_ROOT) {
    return;
  }
  let domParentFiber = fiber.parent;
  while (domParentFiber.tag == CLASS_COMPONENT) {
    domParentFiber = domParentFiber.parent;
  }
  const domParent = domParentFiber.stateNode;
  if (fiber.effectTag == PLACEMENT && fiber.tag == HOST_COMPONENT) {
    // add the new element to the dom
    domParent.appendChild(fiber.stateNode);
  } else if (fiber.effectTag == UPDATE) {
    // update the dom properties of the element.
    updateDomProperties(fiber.stateNode, fiber.alternate.props, fiber.props);
  } else if (fiber.effectTag == DELETION) {
    // remove the node from the DOM its not needed
    commitDeletion(fiber, domParent);
  }
}

function commitDeletion(fiber, domParent) {
  // this function
  // removes the siblings of the current fiber
  // if a sibling is not present jump back to the parent
  // of the fiber. This is if the node is not equal to the fiber
  let node = fiber;
  while (true) {
    if (node.tag == CLASS_COMPONENT) {
      // check the child of the class component.
      // then loop back.
      node = node.child;
      continue;
    }
    domParent.removeChild(node.stateNode);
    while (node != fiber && !node.sibling) {
      // if there are no siblings jump back up to
      // to the node's parent.
      node = node.parent;
    }
    if (node == fiber) {
      return;
    }
    node = node.sibling;
  }
}