Repository: facebook/react
File: packages/react-server/src/ReactFizzServer.js (JavaScript)

Code before:
): void {
  // Something suspended, we'll need to create a new segment and resolve it later.
  const segment = task.blockedSegment;
  const insertionIndex = segment.chunks.length;
  const newSegment = createPendingSegment(
    request,
    insertionIndex,
    null,
    segment.formatContext,
    // Adopt the parent segment's leading text embed
    segment.lastPushedText,
    // Assume we are text embedded at the trailing edge
    true,
  );
  segment.children.push(newSegment);
  // Reset lastPushedText for current Segment since the new Segment "consumed" it
  segment.lastPushedText = false;
  const newTask = createTask(
    request,
    thenableState,
    task.node,
    task.blockedBoundary,
    newSegment,
    task.abortSet,
    task.legacyContext,
    task.context,
    task.treeContext,
  );

  if (__DEV__) {
    if (task.componentStack !== null) {
      // We pop one task off the stack because the node that suspended will be tried again,
      // which will add it back onto the stack.
      newTask.componentStack = task.componentStack.parent;
    }
  }
  const ping = newTask.ping;
  x.then(ping, ping);
}

// This is a non-destructive form of rendering a node. If it suspends it spawns
// a new task and restores the context of this task to what it was before.
function renderNode(request: Request, task: Task, node: ReactNodeList): void {
  // Store how much we've pushed at this point so we can reset it in case something
  // suspended partially through writing something.
  const segment = task.blockedSegment;
  const childrenLength = segment.children.length;
  const chunkLength = segment.chunks.length;

  // Snapshot the current context in case something throws to interrupt the
  // process.

Review comment (suggestion):
This is subtle but the first array inside of a component is the same as having a single element with slot `0`. So the array itself doesn't take up slot `0`. In other words, we the outer most array doesn't get added to the path but the next one gets treated as if it was a fragment element in that slot.

Code after:
      console.error(
        'Functions are not valid as a React child. This may happen if ' +
          'you return a Component instead of <Component /> from render. ' +
          'Or maybe you meant to call this function rather than return it.',
      );
    }
  }
}

function renderChildrenArray(
  request: Request,
  task: Task,
  children: Array<any>,
  childIndex: number,
) {
  const prevKeyPath = task.keyPath;
  const totalChildren = children.length;
  for (let i = 0; i < totalChildren; i++) {
    const prevTreeContext = task.treeContext;
    task.treeContext = pushTreeContext(prevTreeContext, totalChildren, i);
    try {
      const node = children[i];
      if (isArray(node) || getIteratorFn(node)) {
        // Nested arrays behave like a "fragment node" which is keyed.
        // Therefore we need to add the current index as a parent key.
        task.keyPath = [task.keyPath, '', childIndex];
      }
      // We need to use the non-destructive form so that we can safely pop back
      // up and render the sibling if something suspends.
      renderNode(request, task, node, i);
    } finally {
      task.treeContext = prevTreeContext;
      task.keyPath = prevKeyPath;
    }
  }
}

function spawnNewSuspendedTask(
  request: Request,
  task: Task,
  thenableState: ThenableState | null,
  x: Wakeable,
): void {
  // Something suspended, we'll need to create a new segment and resolve it later.
  const segment = task.blockedSegment;
  const insertionIndex = segment.chunks.length;
  const newSegment = createPendingSegment(
    request,
    insertionIndex,
    null,
    segment.formatContext,