Suspense는 어떻게 자식 요소가 로드되기 전까지 대체 UI를 제공할까요?

// Suspense 탄생 이전

function Component() {
  if (!data) return <Loading />

  return <div>Component</div>
}

// Suspense 탄생 이후

function Component() {
  return (
    <Suspense fallback={<Loading />}>
      <div>Component</div>
    </Suspense>
  )
}

// node_modules/.store/@types/react@18.2.38/node_modules/@types/react/ts5.0/index.d.ts

interface SuspenseProps {
  children?: ReactNode | undefined

  /** A fallback react tree to show when a Suspense child (like React.lazy) suspends */
  fallback?: ReactNode
}

const Suspense: ExoticComponent<SuspenseProps>

// packages/react-reconciler/src/ReactFiberBeginWork.js

function beginWork(
  current: Fiber | null,
  workInProgress: Fiber,
  renderLanes: Lanes,
): Fiber | null {
  ...
    case SuspenseComponent:
      return updateSuspenseComponent(current, workInProgress, renderLanes);
  ...
}

// packages/react-reconciler/src/ReactFiberBeginWork.js

function updateSuspenseComponent(
  current: null | Fiber,
  workInProgress: Fiber,
  renderLanes: Lanes,
) {
  ...
}

let showFallback = false
const didSuspend = (workInProgress.flags & DidCapture) !== NoFlags
if (didSuspend || shouldRemainOnFallback(current, workInProgress, renderLanes)) {
  // Something in this boundary's subtree already suspended. Switch to
  // rendering the fallback children.
  showFallback = true
  workInProgress.flags &= ~DidCapture
}

// packages/react-reconciler/src/ReactFiberBeginWork.js

function beginWork(
  current: Fiber | null,
  workInProgress: Fiber,
  renderLanes: Lanes,
): Fiber | null {
  ...
    case FunctionComponent: {
      const Component = workInProgress.type;
      const unresolvedProps = workInProgress.pendingProps;
      const resolvedProps =
        disableDefaultPropsExceptForClasses ||
        workInProgress.elementType === Component
          ? unresolvedProps
          : resolveDefaultPropsOnNonClassComponent(Component, unresolvedProps);
      return updateFunctionComponent(
        current,
        workInProgress,
        Component,
        resolvedProps,
        renderLanes,
      );
    }
  ...
}

// packages/react-reconciler/src/ReactFiberBeginWork.js

function updateFunctionComponent(
  current: null | Fiber,
  workInProgress: Fiber,
  Component: any,
  nextProps: any,
  renderLanes: Lanes,
) {
  ...

  nextChildren = renderWithHooks(
    current,
    workInProgress,
    Component,
    nextProps,
    context,
    renderLanes,
  );

  ...
}

// packages/react-reconciler/src/ReactFiberWorkLoop.js

function renderRootConcurrent(root: FiberRoot, lanes: Lanes) {
  ...
  outer: do {
    try {
      if (
        workInProgressSuspendedReason !== NotSuspended &&
        workInProgress !== null
      ) {
        // The work loop is suspended. During a synchronous render, we don't
        // yield to the main thread. Immediately unwind the stack. This will
        // trigger either a fallback or an error boundary.
        // TODO: For discrete and "default" updates (anything that's not
        // flushSync), we want to wait for the microtasks the flush before
        // unwinding. Will probably implement this using renderRootConcurrent,
        // or merge renderRootSync and renderRootConcurrent into the same
        // function and fork the behavior some other way.
        const unitOfWork = workInProgress;
        const thrownValue = workInProgressThrownValue;
        switch (workInProgressSuspendedReason) {
          case SuspendedOnHydration: {
            // Selective hydration. An update flowed into a dehydrated tree.
            // Interrupt the current render so the work loop can switch to the
            // hydration lane.
            resetWorkInProgressStack();
            workInProgressRootExitStatus = RootDidNotComplete;
            break outer;
          }
          case SuspendedOnImmediate:
          case SuspendedOnData: {
            if (!didSuspendInShell && getSuspenseHandler() === null) {
              didSuspendInShell = true;
            }
            // Intentional fallthrough
          }
          default: {
            // Unwind then continue with the normal work loop.
            const reason = workInProgressSuspendedReason;
            workInProgressSuspendedReason = NotSuspended;
            workInProgressThrownValue = null;
            throwAndUnwindWorkLoop(root, unitOfWork, thrownValue, reason);
            break;
          }
        }
      }
      workLoopSync();
      break;
    } catch (thrownValue) {
      handleThrow(root, thrownValue);
    }
  }
  ...
}

// packages/react-reconciler/src/ReactFiberWorkLoop.js

function throwAndUnwindWorkLoop(
  root: FiberRoot,
  unitOfWork: Fiber,
  thrownValue: mixed,
  suspendedReason: SuspendedReason,
) {
  ...

  try {
  // Find and mark the nearest Suspense or error boundary that can handle
  // this "exception".
    const didFatal = throwException(
      root,
      returnFiber,
      unitOfWork,
      thrownValue,
      workInProgressRootRenderLanes,
    );
    if (didFatal) {
      panicOnRootError(root, thrownValue);
      return;
    }
  }

  ...
}

// packages/react-reconciler/src/ReactFiberThrow.js

function throwException(
  root: FiberRoot,
  returnFiber: Fiber | null,
  sourceFiber: Fiber,
  value: mixed,
  rootRenderLanes: Lanes,
): boolean {
  ...

  markSuspenseBoundaryShouldCapture(
    suspenseBoundary,
    returnFiber,
    sourceFiber,
    root,
    rootRenderLanes,
  );

  ...

}

function markSuspenseBoundaryShouldCapture(
  suspenseBoundary: Fiber,
  returnFiber: Fiber | null,
  sourceFiber: Fiber,
  root: FiberRoot,
  rootRenderLanes: Lanes,
): Fiber | null {
  ...

  if (suspenseBoundary === returnFiber) {
    // Special case where we suspended while reconciling the children of
    // a Suspense boundary's inner Offscreen wrapper fiber. This happens
    // when a React.lazy component is a direct child of a
    // Suspense boundary.
    //
    // Suspense boundaries are implemented as multiple fibers, but they
    // are a single conceptual unit. The legacy mode behavior where we
    // pretend the suspended fiber committed as `null` won't work,
    // because in this case the "suspended" fiber is the inner
    // Offscreen wrapper.
    //
    // Because the contents of the boundary haven't started rendering
    // yet (i.e. nothing in the tree has partially rendered) we can
    // switch to the regular, concurrent mode behavior: mark the
    // boundary with ShouldCapture and enter the unwind phase.
    suspenseBoundary.flags |= ShouldCapture;
  }

  ...

}