updateViewTransition() — react Function Reference

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

Function javascript BabelCompiler Validation calls 3 called by 1

Entity Profile

BabelCompiler→ Validation→ updateViewTransition() — react Function Reference

Dependency Diagram

graph TD
  a4677f2e_f0f6_771a_d467_f3a4fbe183e4["updateViewTransition()"]
  0be70812_cc0c_b210_f84f_8e61dd5f831c["ReactFiberBeginWork.js"]
  a4677f2e_f0f6_771a_d467_f3a4fbe183e4 -->|defined in| 0be70812_cc0c_b210_f84f_8e61dd5f831c
  235e1db1_02a4_912f_7d82_ea6636c850c0["beginWork()"]
  235e1db1_02a4_912f_7d82_ea6636c850c0 -->|calls| a4677f2e_f0f6_771a_d467_f3a4fbe183e4
  dae8f65a_04a5_194b_7c97_c4819e519207["getIsHydrating()"]
  a4677f2e_f0f6_771a_d467_f3a4fbe183e4 -->|calls| dae8f65a_04a5_194b_7c97_c4819e519207
  add16f45_ce6d_6414_6371_4a68ab583d28["markRef()"]
  a4677f2e_f0f6_771a_d467_f3a4fbe183e4 -->|calls| add16f45_ce6d_6414_6371_4a68ab583d28
  cf5641cc_b89e_d6b2_5d40_41ad5bbdd682["reconcileChildren()"]
  a4677f2e_f0f6_771a_d467_f3a4fbe183e4 -->|calls| cf5641cc_b89e_d6b2_5d40_41ad5bbdd682
  style a4677f2e_f0f6_771a_d467_f3a4fbe183e4 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-reconciler/src/ReactFiberBeginWork.js lines 3566–3626

function updateViewTransition(
  current: Fiber | null,
  workInProgress: Fiber,
  renderLanes: Lanes,
) {
  if (workInProgress.stateNode === null) {
    // We previously reset the work-in-progress.
    // We need to create a new ViewTransitionState instance.
    const instance: ViewTransitionState = {
      autoName: null,
      paired: null,
      clones: null,
      ref: null,
    };
    workInProgress.stateNode = instance;
  }

  const pendingProps: ViewTransitionProps = workInProgress.pendingProps;
  if (pendingProps.name != null && pendingProps.name !== 'auto') {
    // Explicitly named boundary. We track it so that we can pair it up with another explicit
    // boundary if we get deleted.
    workInProgress.flags |=
      current === null
        ? ViewTransitionNamedMount | ViewTransitionNamedStatic
        : ViewTransitionNamedStatic;
  } else {
    // The server may have used useId to auto-assign a generated name for this boundary.
    // We push a materialization to ensure child ids line up with the server.
    if (getIsHydrating()) {
      pushMaterializedTreeId(workInProgress);
    }
  }
  if (__DEV__) {
    // $FlowFixMe[prop-missing]
    if (pendingProps.className !== undefined) {
      const example =
        typeof pendingProps.className === 'string'
          ? JSON.stringify(pendingProps.className)
          : '{...}';
      if (!didWarnAboutClassNameOnViewTransition[example]) {
        didWarnAboutClassNameOnViewTransition[example] = true;
        console.error(
          '<ViewTransition> doesn\'t accept a "className" prop. It has been renamed to "default".\n' +
            '-   <ViewTransition className=%s>\n' +
            '+   <ViewTransition default=%s>',
          example,
          example,
        );
      }
    }
  }
  if (current !== null && current.memoizedProps.name !== pendingProps.name) {
    // If the name changes, we schedule a ref effect to create a new ref instance.
    workInProgress.flags |= Ref | RefStatic;
  } else {
    markRef(current, workInProgress);
  }
  const nextChildren = pendingProps.children;
  reconcileChildren(current, workInProgress, nextChildren, renderLanes);
  return workInProgress.child;
}