updatePortalComponent() — react Function Reference

Architecture documentation for the updatePortalComponent() function in ReactFiberBeginWork.js from the react codebase.

Function javascript BabelCompiler Validation calls 2 called by 1

Entity Profile

BabelCompiler→ Validation→ updatePortalComponent() — react Function Reference

Dependency Diagram

graph TD
  34c6ce5d_a29b_1593_e4b1_ed95494a5da8["updatePortalComponent()"]
  0be70812_cc0c_b210_f84f_8e61dd5f831c["ReactFiberBeginWork.js"]
  34c6ce5d_a29b_1593_e4b1_ed95494a5da8 -->|defined in| 0be70812_cc0c_b210_f84f_8e61dd5f831c
  235e1db1_02a4_912f_7d82_ea6636c850c0["beginWork()"]
  235e1db1_02a4_912f_7d82_ea6636c850c0 -->|calls| 34c6ce5d_a29b_1593_e4b1_ed95494a5da8
  e104a7c6_8b49_d343_834d_bfd8cdc38b6d["pushHostContainer()"]
  34c6ce5d_a29b_1593_e4b1_ed95494a5da8 -->|calls| e104a7c6_8b49_d343_834d_bfd8cdc38b6d
  cf5641cc_b89e_d6b2_5d40_41ad5bbdd682["reconcileChildren()"]
  34c6ce5d_a29b_1593_e4b1_ed95494a5da8 -->|calls| cf5641cc_b89e_d6b2_5d40_41ad5bbdd682
  style 34c6ce5d_a29b_1593_e4b1_ed95494a5da8 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-reconciler/src/ReactFiberBeginWork.js lines 3628–3651

function updatePortalComponent(
  current: Fiber | null,
  workInProgress: Fiber,
  renderLanes: Lanes,
) {
  pushHostContainer(workInProgress, workInProgress.stateNode.containerInfo);
  const nextChildren = workInProgress.pendingProps;
  if (current === null) {
    // Portals are special because we don't append the children during mount
    // but at commit. Therefore we need to track insertions which the normal
    // flow doesn't do during mount. This doesn't happen at the root because
    // the root always starts with a "current" with a null child.
    // TODO: Consider unifying this with how the root works.
    workInProgress.child = reconcileChildFibers(
      workInProgress,
      null,
      nextChildren,
      renderLanes,
    );
  } else {
    reconcileChildren(current, workInProgress, nextChildren, renderLanes);
  }
  return workInProgress.child;
}