updateSuspenseListComponent() — react Function Reference

Source Code

packages/react-reconciler/src/ReactFiberBeginWork.js lines 3383–3564

function updateSuspenseListComponent(
  current: Fiber | null,
  workInProgress: Fiber,
  renderLanes: Lanes,
) {
  const nextProps: SuspenseListProps = workInProgress.pendingProps;
  const revealOrder: SuspenseListRevealOrder = nextProps.revealOrder;
  const tailMode: SuspenseListTailMode = nextProps.tail;
  const newChildren = nextProps.children;

  let suspenseContext: SuspenseContext = suspenseStackCursor.current;

  if (workInProgress.flags & DidCapture) {
    // This is the second pass after having suspended in a row. Proceed directly
    // to the complete phase.
    pushSuspenseListContext(workInProgress, suspenseContext);
    return null;
  }

  const shouldForceFallback = hasSuspenseListContext(
    suspenseContext,
    (ForceSuspenseFallback: SuspenseContext),
  );
  if (shouldForceFallback) {
    suspenseContext = setShallowSuspenseListContext(
      suspenseContext,
      ForceSuspenseFallback,
    );
    workInProgress.flags |= DidCapture;
  } else {
    suspenseContext = setDefaultShallowSuspenseListContext(suspenseContext);
  }
  pushSuspenseListContext(workInProgress, suspenseContext);

  validateRevealOrder(revealOrder);
  validateTailOptions(tailMode, revealOrder);
  validateSuspenseListChildren(newChildren, revealOrder);

  if (revealOrder === 'backwards' && current !== null) {
    // For backwards the current mounted set will be backwards. Reconciling against it
    // will lead to mismatches and reorders. We need to swap the original set first
    // and then restore it afterwards.
    reverseChildren(current);
    reconcileChildren(current, workInProgress, newChildren, renderLanes);
    reverseChildren(current);
  } else {
    reconcileChildren(current, workInProgress, newChildren, renderLanes);
  }
  // Read how many children forks this set pushed so we can push it every time we retry.
  const treeForkCount = getIsHydrating() ? getForksAtLevel(workInProgress) : 0;

  if (!shouldForceFallback) {
    const didSuspendBefore =
      current !== null && (current.flags & DidCapture) !== NoFlags;
    if (didSuspendBefore) {
      // If we previously forced a fallback, we need to schedule work
      // on any nested boundaries to let them know to try to render
      // again. This is the same as context updating.
      propagateSuspenseContextChange(
        workInProgress,
        workInProgress.child,
        renderLanes,
      );
    }
  }

  if (!disableLegacyMode && (workInProgress.mode & ConcurrentMode) === NoMode) {
    // In legacy mode, SuspenseList doesn't work so we just
    // use make it a noop by treating it as the default revealOrder.
    workInProgress.memoizedState = null;
  } else {
    switch (revealOrder) {
      case 'backwards': {
        // We're going to find the first row that has existing content.
        // We are also going to reverse the order of anything in the existing content
        // since we want to actually render them backwards from the reconciled set.
        // The tail is left in order, because it'll be added to the front as we
        // complete each item.
        const lastContentRow = findLastContentRow(workInProgress.child);
        let tail;
        if (lastContentRow === null) {