updateHostComponent() — react Function Reference

Architecture documentation for the updateHostComponent() function in ReactFiberCompleteWork.js from the react codebase.

Function javascript BabelCompiler Validation calls 6 called by 1

Entity Profile

BabelCompiler→ Validation→ updateHostComponent() — react Function Reference

Dependency Diagram

graph TD
  17f65ca7_1e68_0419_b46a_9bf4b1b54b06["updateHostComponent()"]
  6b05669d_2f09_63a5_e79f_0afc195f25a3["ReactFiberCompleteWork.js"]
  17f65ca7_1e68_0419_b46a_9bf4b1b54b06 -->|defined in| 6b05669d_2f09_63a5_e79f_0afc195f25a3
  0b8db832_87fd_e560_8aa8_e2b319c81626["completeWork()"]
  0b8db832_87fd_e560_8aa8_e2b319c81626 -->|calls| 17f65ca7_1e68_0419_b46a_9bf4b1b54b06
  62389190_5e71_b961_f5c1_ce663e236915["markUpdate()"]
  17f65ca7_1e68_0419_b46a_9bf4b1b54b06 -->|calls| 62389190_5e71_b961_f5c1_ce663e236915
  b22571f1_f869_ca60_b928_0a21847aa17b["doesRequireClone()"]
  17f65ca7_1e68_0419_b46a_9bf4b1b54b06 -->|calls| b22571f1_f869_ca60_b928_0a21847aa17b
  950cf4f4_84e4_d7d6_01b0_f2c00f238dae["getHostContext()"]
  17f65ca7_1e68_0419_b46a_9bf4b1b54b06 -->|calls| 950cf4f4_84e4_d7d6_01b0_f2c00f238dae
  87042ca2_c4f2_9b17_b272_b821412c5923["markCloned()"]
  17f65ca7_1e68_0419_b46a_9bf4b1b54b06 -->|calls| 87042ca2_c4f2_9b17_b272_b821412c5923
  d6e3ac5e_f6c5_98d7_de25_cdce6cf422bc["appendAllChildrenToContainer()"]
  17f65ca7_1e68_0419_b46a_9bf4b1b54b06 -->|calls| d6e3ac5e_f6c5_98d7_de25_cdce6cf422bc
  3483c4f4_6e48_2c4f_6357_1fb618581af6["appendAllChildren()"]
  17f65ca7_1e68_0419_b46a_9bf4b1b54b06 -->|calls| 3483c4f4_6e48_2c4f_6357_1fb618581af6
  style 17f65ca7_1e68_0419_b46a_9bf4b1b54b06 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-reconciler/src/ReactFiberCompleteWork.js lines 455–540

function updateHostComponent(
  current: Fiber,
  workInProgress: Fiber,
  type: Type,
  newProps: Props,
  renderLanes: Lanes,
) {
  if (supportsMutation) {
    // If we have an alternate, that means this is an update and we need to
    // schedule a side-effect to do the updates.
    const oldProps = current.memoizedProps;
    if (oldProps === newProps) {
      // In mutation mode, this is sufficient for a bailout because
      // we won't touch this node even if children changed.
      return;
    }

    markUpdate(workInProgress);
  } else if (supportsPersistence) {
    const currentInstance = current.stateNode;
    const oldProps = current.memoizedProps;
    // If there are no effects associated with this node, then none of our children had any updates.
    // This guarantees that we can reuse all of them.
    const requiresClone = doesRequireClone(current, workInProgress);
    if (!requiresClone && oldProps === newProps) {
      // No changes, just reuse the existing instance.
      // Note that this might release a previous clone.
      workInProgress.stateNode = currentInstance;
      return;
    }
    const currentHostContext = getHostContext();

    let newChildSet = null;
    let hasOffscreenComponentChild = false;
    if (requiresClone && passChildrenWhenCloningPersistedNodes) {
      markCloned(workInProgress);
      newChildSet = createContainerChildSet();
      // If children might have changed, we have to add them all to the set.
      hasOffscreenComponentChild = appendAllChildrenToContainer(
        newChildSet,
        workInProgress,
        /* needsVisibilityToggle */ false,
        /* isHidden */ false,
      );
    }

    const newInstance = cloneInstance(
      currentInstance,
      type,
      oldProps,
      newProps,
      !requiresClone,
      !hasOffscreenComponentChild ? newChildSet : undefined,
    );
    if (newInstance === currentInstance) {
      // No changes, just reuse the existing instance.
      // Note that this might release a previous clone.
      workInProgress.stateNode = currentInstance;
      return;
    } else {
      markCloned(workInProgress);
    }

    // Certain renderers require commit-time effects for initial mount.
    // (eg DOM renderer supports auto-focus for certain elements).
    // Make sure such renderers get scheduled for later work.
    if (
      finalizeInitialChildren(newInstance, type, newProps, currentHostContext)
    ) {
      markUpdate(workInProgress);
    }
    workInProgress.stateNode = newInstance;
    if (
      requiresClone &&
      (!passChildrenWhenCloningPersistedNodes || hasOffscreenComponentChild)
    ) {
      // If children have changed, we have to add them all to the set.
      appendAllChildren(
        newInstance,
        workInProgress,
        /* needsVisibilityToggle */ false,