Home / Function/ bubbleProperties() — react Function Reference

bubbleProperties() — react Function Reference

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

Entity Profile

Dependency Diagram

graph TD
  1a7e7cc1_6419_de9c_0611_6890ef404e66["bubbleProperties()"]
  6b05669d_2f09_63a5_e79f_0afc195f25a3["ReactFiberCompleteWork.js"]
  1a7e7cc1_6419_de9c_0611_6890ef404e66 -->|defined in| 6b05669d_2f09_63a5_e79f_0afc195f25a3
  44c16661_4569_a3d1_aee6_5c634865dd4f["completeDehydratedActivityBoundary()"]
  44c16661_4569_a3d1_aee6_5c634865dd4f -->|calls| 1a7e7cc1_6419_de9c_0611_6890ef404e66
  f7a91352_2453_8bcd_5056_584b2804cbf7["completeDehydratedSuspenseBoundary()"]
  f7a91352_2453_8bcd_5056_584b2804cbf7 -->|calls| 1a7e7cc1_6419_de9c_0611_6890ef404e66
  0b8db832_87fd_e560_8aa8_e2b319c81626["completeWork()"]
  0b8db832_87fd_e560_8aa8_e2b319c81626 -->|calls| 1a7e7cc1_6419_de9c_0611_6890ef404e66
  style 1a7e7cc1_6419_de9c_0611_6890ef404e66 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-reconciler/src/ReactFiberCompleteWork.js lines 781–902

function bubbleProperties(completedWork: Fiber) {
  const didBailout =
    completedWork.alternate !== null &&
    completedWork.alternate.child === completedWork.child;

  let newChildLanes: Lanes = NoLanes;
  let subtreeFlags: Flags = NoFlags;

  if (!didBailout) {
    // Bubble up the earliest expiration time.
    if (enableProfilerTimer && (completedWork.mode & ProfileMode) !== NoMode) {
      // In profiling mode, resetChildExpirationTime is also used to reset
      // profiler durations.
      let actualDuration = completedWork.actualDuration;
      let treeBaseDuration = ((completedWork.selfBaseDuration: any): number);

      let child = completedWork.child;
      while (child !== null) {
        newChildLanes = mergeLanes(
          newChildLanes,
          mergeLanes(child.lanes, child.childLanes),
        );

        subtreeFlags |= child.subtreeFlags;
        subtreeFlags |= child.flags;

        // When a fiber is cloned, its actualDuration is reset to 0. This value will
        // only be updated if work is done on the fiber (i.e. it doesn't bailout).
        // When work is done, it should bubble to the parent's actualDuration. If
        // the fiber has not been cloned though, (meaning no work was done), then
        // this value will reflect the amount of time spent working on a previous
        // render. In that case it should not bubble. We determine whether it was
        // cloned by comparing the child pointer.
        // $FlowFixMe[unsafe-addition] addition with possible null/undefined value
        actualDuration += child.actualDuration;

        // $FlowFixMe[unsafe-addition] addition with possible null/undefined value
        treeBaseDuration += child.treeBaseDuration;
        child = child.sibling;
      }

      completedWork.actualDuration = actualDuration;
      completedWork.treeBaseDuration = treeBaseDuration;
    } else {
      let child = completedWork.child;
      while (child !== null) {
        newChildLanes = mergeLanes(
          newChildLanes,
          mergeLanes(child.lanes, child.childLanes),
        );

        subtreeFlags |= child.subtreeFlags;
        subtreeFlags |= child.flags;

        // Update the return pointer so the tree is consistent. This is a code
        // smell because it assumes the commit phase is never concurrent with
        // the render phase. Will address during refactor to alternate model.
        child.return = completedWork;

        child = child.sibling;
      }
    }

    completedWork.subtreeFlags |= subtreeFlags;
  } else {
    // Bubble up the earliest expiration time.
    if (enableProfilerTimer && (completedWork.mode & ProfileMode) !== NoMode) {
      // In profiling mode, resetChildExpirationTime is also used to reset
      // profiler durations.
      let treeBaseDuration = ((completedWork.selfBaseDuration: any): number);

      let child = completedWork.child;
      while (child !== null) {
        newChildLanes = mergeLanes(
          newChildLanes,
          mergeLanes(child.lanes, child.childLanes),
        );

        // "Static" flags share the lifetime of the fiber/hook they belong to,
        // so we should bubble those up even during a bailout. All the other
        // flags have a lifetime only of a single render + commit, so we should

Domain

Subdomains

Frequently Asked Questions

What does bubbleProperties() do?
bubbleProperties() is a function in the react codebase, defined in packages/react-reconciler/src/ReactFiberCompleteWork.js.
Where is bubbleProperties() defined?
bubbleProperties() is defined in packages/react-reconciler/src/ReactFiberCompleteWork.js at line 781.
What calls bubbleProperties()?
bubbleProperties() is called by 3 function(s): completeDehydratedActivityBoundary, completeDehydratedSuspenseBoundary, completeWork.

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free