updateDehydratedSuspenseComponent() — react Function Reference

Source Code

packages/react-reconciler/src/ReactFiberBeginWork.js lines 2934–3159

function updateDehydratedSuspenseComponent(
  current: Fiber,
  workInProgress: Fiber,
  didSuspend: boolean,
  didPrimaryChildrenDefer: boolean,
  nextProps: SuspenseProps,
  suspenseInstance: SuspenseInstance,
  suspenseState: SuspenseState,
  renderLanes: Lanes,
): null | Fiber {
  if (!didSuspend) {
    // This is the first render pass. Attempt to hydrate.
    pushPrimaryTreeSuspenseHandler(workInProgress);

    // We should never be hydrating at this point because it is the first pass,
    // but after we've already committed once.
    warnIfHydrating();

    if (includesSomeLane(renderLanes, (OffscreenLane: Lane))) {
      // If we're rendering Offscreen and we're entering the activity then it's possible
      // that the only reason we rendered was because this boundary left work. Provide
      // it as a cause if another one doesn't already exist.
      markRenderDerivedCause(workInProgress);
    }

    if (isSuspenseInstanceFallback(suspenseInstance)) {
      // This boundary is in a permanent fallback state. In this case, we'll never
      // get an update and we'll never be able to hydrate the final content. Let's just try the
      // client side render instead.
      let digest: ?string;
      let message;
      let stack = null;
      let componentStack = null;
      if (__DEV__) {
        ({digest, message, stack, componentStack} =
          getSuspenseInstanceFallbackErrorDetails(suspenseInstance));
      } else {
        ({digest} = getSuspenseInstanceFallbackErrorDetails(suspenseInstance));
      }

      let error: Error;
      if (__DEV__ && message) {
        // eslint-disable-next-line react-internal/prod-error-codes
        error = new Error(message);
      } else {
        error = new Error(
          'The server could not finish this Suspense boundary, likely ' +
            'due to an error during server rendering. ' +
            'Switched to client rendering.',
        );
      }
      // Replace the stack with the server stack
      error.stack = (__DEV__ && stack) || '';
      (error: any).digest = digest;
      const capturedValue = createCapturedValueFromError(
        error,
        componentStack === undefined ? null : componentStack,
      );
      queueHydrationError(capturedValue);
      return retrySuspenseComponentWithoutHydrating(
        current,
        workInProgress,
        renderLanes,
      );
    }

    if (
      // TODO: Factoring is a little weird, since we check this right below, too.
      !didReceiveUpdate
    ) {
      // We need to check if any children have context before we decide to bail
      // out, so propagate the changes now.
      lazilyPropagateParentContextChanges(current, workInProgress, renderLanes);
    }

    // We use lanes to indicate that a child might depend on context, so if
    // any context has changed, we need to treat is as if the input might have changed.
    const hasContextChanged = includesSomeLane(renderLanes, current.childLanes);
    if (didReceiveUpdate || hasContextChanged) {
      // This boundary has changed since the first render. This means that we are now unable to
      // hydrate it. We might still be able to hydrate it using a higher priority lane.