cutOffTailIfNeeded() — react Function Reference

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

Function javascript BabelCompiler Validation calls 1 called by 1

Entity Profile

BabelCompiler→ Validation→ cutOffTailIfNeeded() — react Function Reference

Dependency Diagram

graph TD
  edeee39d_bd60_49f9_aa99_ee2103b82a8d["cutOffTailIfNeeded()"]
  6b05669d_2f09_63a5_e79f_0afc195f25a3["ReactFiberCompleteWork.js"]
  edeee39d_bd60_49f9_aa99_ee2103b82a8d -->|defined in| 6b05669d_2f09_63a5_e79f_0afc195f25a3
  0b8db832_87fd_e560_8aa8_e2b319c81626["completeWork()"]
  0b8db832_87fd_e560_8aa8_e2b319c81626 -->|calls| edeee39d_bd60_49f9_aa99_ee2103b82a8d
  dae8f65a_04a5_194b_7c97_c4819e519207["getIsHydrating()"]
  edeee39d_bd60_49f9_aa99_ee2103b82a8d -->|calls| dae8f65a_04a5_194b_7c97_c4819e519207
  style edeee39d_bd60_49f9_aa99_ee2103b82a8d fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-reconciler/src/ReactFiberCompleteWork.js lines 693–768

function cutOffTailIfNeeded(
  renderState: SuspenseListRenderState,
  hasRenderedATailFallback: boolean,
) {
  if (getIsHydrating()) {
    // If we're hydrating, we should consume as many items as we can
    // so we don't leave any behind.
    return;
  }
  switch (renderState.tailMode) {
    case 'visible': {
      // Everything should remain as it was.
      break;
    }
    case 'collapsed': {
      // Any insertions at the end of the tail list after this point
      // should be invisible. If there are already mounted boundaries
      // anything before them are not considered for collapsing.
      // Therefore we need to go through the whole tail to find if
      // there are any.
      let tailNode = renderState.tail;
      let lastTailNode = null;
      while (tailNode !== null) {
        if (tailNode.alternate !== null) {
          lastTailNode = tailNode;
        }
        tailNode = tailNode.sibling;
      }
      // Next we're simply going to delete all insertions after the
      // last rendered item.
      if (lastTailNode === null) {
        // All remaining items in the tail are insertions.
        if (!hasRenderedATailFallback && renderState.tail !== null) {
          // We suspended during the head. We want to show at least one
          // row at the tail. So we'll keep on and cut off the rest.
          renderState.tail.sibling = null;
        } else {
          renderState.tail = null;
        }
      } else {
        // Detach the insertion after the last node that was already
        // inserted.
        lastTailNode.sibling = null;
      }
      break;
    }
    // Hidden is now the default.
    case 'hidden':
    default: {
      // Any insertions at the end of the tail list after this point
      // should be invisible. If there are already mounted boundaries
      // anything before them are not considered for collapsing.
      // Therefore we need to go through the whole tail to find if
      // there are any.
      let tailNode = renderState.tail;
      let lastTailNode = null;
      while (tailNode !== null) {
        if (tailNode.alternate !== null) {
          lastTailNode = tailNode;
        }
        tailNode = tailNode.sibling;
      }
      // Next we're simply going to delete all insertions after the
      // last rendered item.
      if (lastTailNode === null) {
        // All remaining items in the tail are insertions.
        renderState.tail = null;
      } else {
        // Detach the insertion after the last node that was already
        // inserted.
        lastTailNode.sibling = null;
      }
      break;
    }
  }
}