export function performWorkOnRoot(  root: FiberRoot,  lanes: Lanes,  forceSync: boolean,): void {  if ((executionContext & (RenderContext | CommitContext)) !== NoContext) {    throw new Error('Should not already be working.');  }  // We disable time-slicing in some cases: if the work has been CPU-bound  // for too long ("expired" work, to prevent starvation), or we're in  // sync-updates-by-default mode.  const shouldTimeSlice =    (!forceSync &&      !includesBlockingLane(lanes) &&      !includesExpiredLane(root, lanes)) ||    // If we're prerendering, then we should use the concurrent work loop    // even if the lanes are synchronous, so that prerendering never blocks    // the main thread.    // TODO: We should consider doing this whenever a sync lane is suspended,    // even for regular pings.    (enableSiblingPrerendering && checkIfRootIsPrerendering(root, lanes));  // 1. TimeSlice할지(Conccurent하게 할지) 여부에 따라 실행하는 함수가 달라진다.  // 1. Fiber 트리를 구성.  let exitStatus = shouldTimeSlice    ? renderRootConcurrent(root, lanes)    : renderRootSync(root, lanes, true);  let renderWasConcurrent = shouldTimeSlice;  // 2. Fiber 트리 구성 과정에서 예외가 발생시 예외 처리. Suspense 처리.  do {    if (exitStatus === RootInProgress) {      // Render phase is still in progress.      if (        enableSiblingPrerendering &&        workInProgressRootIsPrerendering &&        !shouldTimeSlice      ) {        // We're in prerendering mode, but time slicing is not enabled. This        // happens when something suspends during a synchronous update. Exit the        // the work loop. When we resume, we'll use the concurrent work loop so        // that prerendering is non-blocking.        //        // Mark the root as suspended. Usually we do this at the end of the        // render phase, but we do it here so that we resume in        // prerendering mode.        // TODO: Consider always calling markRootSuspended immediately.        // Needs to be *after* we attach a ping listener, though.        const didAttemptEntireTree = false;        markRootSuspended(root, lanes, NoLane, didAttemptEntireTree);      }      break;    } else {      // The render completed.      // Check if this render may have yielded to a concurrent event, and if so,      // confirm that any newly rendered stores are consistent.      // TODO: It's possible that even a concurrent render may never have yielded      // to the main thread, if it was fast enough, or if it expired. We could      // skip the consistency check in that case, too.      const finishedWork: Fiber = (root.current.alternate: any);      if (        renderWasConcurrent &&        !isRenderConsistentWithExternalStores(finishedWork)      ) {        if (enableProfilerTimer && enableComponentPerformanceTrack) {          setCurrentTrackFromLanes(lanes);          logInconsistentRender(renderStartTime, renderEndTime);          finalizeRender(lanes, renderEndTime);        }        // A store was mutated in an interleaved event. Render again,        // synchronously, to block further mutations.        exitStatus = renderRootSync(root, lanes, false);        // We assume the tree is now consistent because we didn't yield to any        // concurrent events.        renderWasConcurrent = false;        // Need to check the exit status again.        continue;      }      // 에러 발생했는지 확인      if (        (disableLegacyMode || root.tag !== LegacyRoot) &&        exitStatus === RootErrored      ) {        const lanesThatJustErrored = lanes;        const errorRetryLanes = getLanesToRetrySynchronouslyOnError(          root,          lanesThatJustErrored,        );        if (errorRetryLanes !== NoLanes) {          if (enableProfilerTimer && enableComponentPerformanceTrack) {            setCurrentTrackFromLanes(lanes);            logErroredRenderPhase(renderStartTime, renderEndTime, lanes);            finalizeRender(lanes, renderEndTime);          }          lanes = errorRetryLanes;          exitStatus = recoverFromConcurrentError(            root,            lanesThatJustErrored,            errorRetryLanes,          );          renderWasConcurrent = false;          // Need to check the exit status again.          if (exitStatus !== RootErrored) {            // The root did not error this time. Restart the exit algorithm            // from the beginning.            // TODO: Refactor the exit algorithm to be less confusing. Maybe            // more branches + recursion instead of a loop. I think the only            // thing that causes it to be a loop is the RootSuspendedAtTheShell            // check. If that's true, then we don't need a loop/recursion            // at all.            continue;          }        }      }      if (exitStatus === RootFatalErrored) {        prepareFreshStack(root, NoLanes);        // Since this is a fatal error, we're going to pretend we attempted        // the entire tree, to avoid scheduling a prerender.        const didAttemptEntireTree = true;        markRootSuspended(root, lanes, NoLane, didAttemptEntireTree);        break;      }      // We now have a consistent tree. The next step is either to commit it,      // or, if something suspended, wait to commit it after a timeout.      // 3. 아래 함수 사용하여 출력.(commit)      finishConcurrentRender(        root,        exitStatus,        finishedWork,        lanes,        renderEndTime,      );    }    break;  } while (true);  // 종료 전에 다시 확인: 다른 업데이트가 있는지, 새 스케줄이 필요한지.  ensureRootIsScheduled(root);}

function performSyncWorkOnRoot(root: FiberRoot, lanes: Lanes) {  // This is the entry point for synchronous tasks that don't go  // through Scheduler.  const didFlushPassiveEffects = flushPendingEffects();  if (didFlushPassiveEffects) {    // If passive effects were flushed, exit to the outer work loop in the root    // scheduler, so we can recompute the priority.    return null;  }  const forceSync = true;  performWorkOnRoot(root, lanes, forceSync);}// SchedulerTask를 통해 workfunction performWorkOnRootViaSchedulerTask(  root: FiberRoot,  didTimeout: boolean,): RenderTaskFn | null {  // This is the entry point for concurrent tasks scheduled via Scheduler (and  // postTask, in the future).  if (hasPendingCommitEffects()) {    // We are currently in the middle of an async committing (such as a View Transition).    // We could force these to flush eagerly but it's better to defer any work until    // it finishes. This may not be the same root as we're waiting on.    // TODO: This relies on the commit eventually calling ensureRootIsScheduled which    // always calls processRootScheduleInMicrotask which in turn always loops through    // all the roots to figure out. This is all a bit inefficient and if optimized    // it'll need to consider rescheduling a task for any skipped roots.    root.callbackNode = null;    root.callbackPriority = NoLane;    return null;  }  // Flush any pending passive effects before deciding which lanes to work on,  // in case they schedule additional work.  const originalCallbackNode = root.callbackNode;  const didFlushPassiveEffects = flushPendingEffects(true);  if (didFlushPassiveEffects) {    // Something in the passive effect phase may have canceled the current task.    // Check if the task node for this root was changed.    if (root.callbackNode !== originalCallbackNode) {      // The current task was canceled. Exit. We don't need to call      // `ensureRootIsScheduled` because the check above implies either that      // there's a new task, or that there's no remaining work on this root.      return null;    } else {      // Current task was not canceled. Continue.    }  }  // Determine the next lanes to work on, using the fields stored on the root.  // TODO: We already called getNextLanes when we scheduled the callback; we  // should be able to avoid calling it again by stashing the result on the  // root object. However, because we always schedule the callback during  // a microtask (scheduleTaskForRootDuringMicrotask), it's possible that  // an update was scheduled earlier during this same browser task (and  // therefore before the microtasks have run). That's because Scheduler batches  // together multiple callbacks into a single browser macrotask, without  // yielding to microtasks in between. We should probably change this to align  // with the postTask behavior (and literally use postTask when  // it's available).  const workInProgressRoot = getWorkInProgressRoot();  const workInProgressRootRenderLanes = getWorkInProgressRootRenderLanes();  const rootHasPendingCommit =    root.cancelPendingCommit !== null || root.timeoutHandle !== noTimeout;  const lanes = getNextLanes(    root,    root === workInProgressRoot ? workInProgressRootRenderLanes : NoLanes,    rootHasPendingCommit,  );  if (lanes === NoLanes) {    // No more work on this root.    return null;  }  // Enter the work loop.  // TODO: We only check `didTimeout` defensively, to account for a Scheduler  // bug we're still investigating. Once the bug in Scheduler is fixed,  // we can remove this, since we track expiration ourselves.  const forceSync = !disableSchedulerTimeoutInWorkLoop && didTimeout;  //performWorkOnRoot 실행.  performWorkOnRoot(root, lanes, forceSync);  // The work loop yielded, but there may or may not be work left at the current  // priority. Need to determine whether we need to schedule a continuation.  // Usually `scheduleTaskForRootDuringMicrotask` only runs inside a microtask;  // however, since most of the logic for determining if we need a continuation  // versus a new task is the same, we cheat a bit and call it here. This is  // only safe to do because we know we're at the end of the browser task.  // So although it's not an actual microtask, it might as well be.  scheduleTaskForRootDuringMicrotask(root, now());  if (root.callbackNode != null && root.callbackNode === originalCallbackNode) {    // The task node scheduled for this root is the same one that's    // currently executed. Need to return a continuation.    return performWorkOnRootViaSchedulerTask.bind(null, root);  }  return null;}

function finishConcurrentRender(  root: FiberRoot,  exitStatus: RootExitStatus,  finishedWork: Fiber,  lanes: Lanes,  renderEndTime: number, // Profiling-only) {  // TODO: The fact that most of these branches are identical suggests that some  // of the exit statuses are not best modeled as exit statuses and should be  // tracked orthogonally.  switch (exitStatus) {    case RootInProgress:    case RootFatalErrored: {      throw new Error('Root did not complete. This is a bug in React.');    }    case RootSuspendedWithDelay: {      if (!includesOnlyTransitions(lanes)) {        // Commit the placeholder.        break;      }    }    // Fallthrough    case RootSuspendedAtTheShell: {      const didAttemptEntireTree = !workInProgressRootDidSkipSuspendedSiblings;      markRootSuspended(        root,        lanes,        workInProgressDeferredLane,        didAttemptEntireTree,      );      return;    }    case RootErrored: {      // This render errored. Ignore any recoverable errors because we weren't actually      // able to recover. Instead, whatever the final errors were is the ones we log.      // This ensures that we only log the actual client side error if it's just a plain      // error thrown from a component on the server and the client.      workInProgressRootRecoverableErrors = null;      break;    }    case RootSuspended:    case RootCompleted: {      break;    }    default: {      throw new Error('Unknown root exit status.');    }  }    if (      includesOnlyRetries(lanes) &&      (alwaysThrottleRetries || exitStatus === RootSuspended)    ) {      // This render only included retries, no updates. Throttle committing      // retries so that we don't show too many loading states too quickly.      const msUntilTimeout =        globalMostRecentFallbackTime + FALLBACK_THROTTLE_MS - now();      // Don't bother with a very short suspense time.      if (msUntilTimeout > 10) {        const didAttemptEntireTree =          !workInProgressRootDidSkipSuspendedSiblings;        markRootSuspended(          root,          lanes,          workInProgressDeferredLane,          didAttemptEntireTree,        );        const nextLanes = getNextLanes(root, NoLanes, true);        if (nextLanes !== NoLanes) {          // There's additional work we can do on this root. We might as well          // attempt to work on that while we're suspended.          return;        }        // The render is suspended, it hasn't timed out, and there's no        // lower priority work to do. Instead of committing the fallback        // immediately, wait for more data to arrive.        // TODO: Combine retry throttling with Suspensey commits. Right now they        // run one after the other.        root.timeoutHandle = scheduleTimeout(          commitRootWhenReady.bind(            null,            root,            finishedWork,            workInProgressRootRecoverableErrors,            workInProgressTransitions,            workInProgressRootDidIncludeRecursiveRenderUpdate,            lanes,            workInProgressDeferredLane,            workInProgressRootInterleavedUpdatedLanes,            workInProgressSuspendedRetryLanes,            workInProgressRootDidSkipSuspendedSiblings,            exitStatus,            THROTTLED_COMMIT,            renderStartTime,            renderEndTime,          ),          msUntilTimeout,        );        return;      }    }    // 출력: Fiber 트리를 기반으로 실제 렌더링(Coomit).    commitRootWhenReady(      root,      finishedWork,      workInProgressRootRecoverableErrors,      workInProgressTransitions,      workInProgressRootDidIncludeRecursiveRenderUpdate,      lanes,      workInProgressDeferredLane,      workInProgressRootInterleavedUpdatedLanes,      workInProgressSuspendedRetryLanes,      workInProgressRootDidSkipSuspendedSiblings,      exitStatus,      IMMEDIATE_COMMIT,      renderStartTime,      renderEndTime,    );}

function commitRootWhenReady(  root: FiberRoot,  finishedWork: Fiber,  recoverableErrors: Array<CapturedValue<mixed>> | null,  transitions: Array<Transition> | null,  didIncludeRenderPhaseUpdate: boolean,  lanes: Lanes,  spawnedLane: Lane,  updatedLanes: Lanes,  suspendedRetryLanes: Lanes,  didSkipSuspendedSiblings: boolean,  exitStatus: RootExitStatus,  suspendedCommitReason: SuspendedCommitReason, // Profiling-only  completedRenderStartTime: number, // Profiling-only  completedRenderEndTime: number, // Profiling-only) {  root.timeoutHandle = noTimeout;  // TODO: Combine retry throttling with Suspensey commits. Right now they run  // one after the other.  const BothVisibilityAndMaySuspendCommit = Visibility | MaySuspendCommit;  const subtreeFlags = finishedWork.subtreeFlags;  const isViewTransitionEligible =    enableViewTransition && includesOnlyViewTransitionEligibleLanes(lanes); // TODO: Use a subtreeFlag to optimize.  const isGestureTransition = enableSwipeTransition && isGestureRender(lanes);  const maySuspendCommit =    subtreeFlags & ShouldSuspendCommit ||    (subtreeFlags & BothVisibilityAndMaySuspendCommit) ===      BothVisibilityAndMaySuspendCommit;  if (isViewTransitionEligible || maySuspendCommit || isGestureTransition) {    // Before committing, ask the renderer whether the host tree is ready.    // If it's not, we'll wait until it notifies us.    startSuspendingCommit();    // This will walk the completed fiber tree and attach listeners to all    // the suspensey resources. The renderer is responsible for accumulating    // all the load events. This all happens in a single synchronous    // transaction, so it track state in its own module scope.    // This will also track any newly added or appearing ViewTransition    // components for the purposes of forming pairs.    accumulateSuspenseyCommit(finishedWork);    if (isViewTransitionEligible || isGestureTransition) {      // If we're stopping gestures we don't have to wait for any pending      // view transition. We'll stop it when we commit.      if (!enableSwipeTransition || root.stoppingGestures === null) {        suspendOnActiveViewTransition(root.containerInfo);      }    }    // At the end, ask the renderer if it's ready to commit, or if we should    // suspend. If it's not ready, it will return a callback to subscribe to    // a ready event.    const schedulePendingCommit = waitForCommitToBeReady();    if (schedulePendingCommit !== null) {      // NOTE: waitForCommitToBeReady returns a subscribe function so that we      // only allocate a function if the commit isn't ready yet. The other      // pattern would be to always pass a callback to waitForCommitToBeReady.      // Not yet ready to commit. Delay the commit until the renderer notifies      // us that it's ready. This will be canceled if we start work on the      // root again.      root.cancelPendingCommit = schedulePendingCommit(        commitRoot.bind(          null,          root,          finishedWork,          lanes,          recoverableErrors,          transitions,          didIncludeRenderPhaseUpdate,          spawnedLane,          updatedLanes,          suspendedRetryLanes,          exitStatus,          SUSPENDED_COMMIT,          completedRenderStartTime,          completedRenderEndTime,        ),      );      const didAttemptEntireTree = !didSkipSuspendedSiblings;      markRootSuspended(root, lanes, spawnedLane, didAttemptEntireTree);      return;    }  }  // Otherwise, commit immediately.;  commitRoot(    root,    finishedWork,    lanes,    recoverableErrors,    transitions,    didIncludeRenderPhaseUpdate,    spawnedLane,    updatedLanes,    suspendedRetryLanes,    exitStatus,    suspendedCommitReason,    completedRenderStartTime,    completedRenderEndTime,  );}

function commitRoot(  root: FiberRoot,  finishedWork: null | Fiber,  lanes: Lanes,  recoverableErrors: null | Array<CapturedValue<mixed>>,  transitions: Array<Transition> | null,  didIncludeRenderPhaseUpdate: boolean,  spawnedLane: Lane,  updatedLanes: Lanes,  suspendedRetryLanes: Lanes,  exitStatus: RootExitStatus,  suspendedCommitReason: SuspendedCommitReason, // Profiling-only  completedRenderStartTime: number, // Profiling-only  completedRenderEndTime: number, // Profiling-only): void {  root.cancelPendingCommit = null;  do {    // `flushPassiveEffects` will call `flushSyncUpdateQueue` at the end, which    // means `flushPassiveEffects` will sometimes result in additional    // passive effects. So we need to keep flushing in a loop until there are    // no more pending effects.    // TODO: Might be better if `flushPassiveEffects` did not automatically    // flush synchronous work at the end, to avoid factoring hazards like this.    flushPendingEffects();  } while (pendingEffectsStatus !== NO_PENDING_EFFECTS);  flushRenderPhaseStrictModeWarningsInDEV();  if ((executionContext & (RenderContext | CommitContext)) !== NoContext) {    throw new Error('Should not already be working.');  }  if (finishedWork === null) {    if (enableSwipeTransition) {      // Stop any gestures that were completed and is now being reverted.      if (root.stoppingGestures !== null) {        stopCompletedGestures(root);      }    }    return;  }  if (finishedWork === root.current) {    throw new Error(      'Cannot commit the same tree as before. This error is likely caused by ' +        'a bug in React. Please file an issue.',    );  }  // Check which lanes no longer have any work scheduled on them, and mark  // those as finished.  let remainingLanes = mergeLanes(finishedWork.lanes, finishedWork.childLanes);  // Make sure to account for lanes that were updated by a concurrent event  // during the render phase; don't mark them as finished.  const concurrentlyUpdatedLanes = getConcurrentlyUpdatedLanes();  remainingLanes = mergeLanes(remainingLanes, concurrentlyUpdatedLanes);  if (enableSwipeTransition && root.pendingGestures === null) {    // Gestures don't clear their lanes while the gesture is still active but it    // might not be scheduled to do any more renders and so we shouldn't schedule    // any more gesture lane work until a new gesture is scheduled.    remainingLanes &= ~GestureLane;  }  markRootFinished(    root,    lanes,    remainingLanes,    spawnedLane,    updatedLanes,    suspendedRetryLanes,  );  // Reset this before firing side effects so we can detect recursive updates.  didIncludeCommitPhaseUpdate = false;  if (root === workInProgressRoot) {    // We can reset these now that they are finished.    workInProgressRoot = null;    workInProgress = null;    workInProgressRootRenderLanes = NoLanes;  } else {    // This indicates that the last root we worked on is not the same one that    // we're committing now. This most commonly happens when a suspended root    // times out.  }  // workInProgressX might be overwritten, so we want  // to store it in pendingPassiveX until they get processed  // We need to pass this through as an argument to commitRoot  // because workInProgressX might have changed between  // the previous render and commit if we throttle the commit  // with setTimeout  pendingFinishedWork = finishedWork;  pendingEffectsRoot = root;  pendingEffectsLanes = lanes;  pendingEffectsRemainingLanes = remainingLanes;  pendingPassiveTransitions = transitions;  pendingRecoverableErrors = recoverableErrors;  pendingDidIncludeRenderPhaseUpdate = didIncludeRenderPhaseUpdate;  if (enableSwipeTransition && isGestureRender(lanes)) {    // This is a special kind of render that doesn't commit regular effects.    commitGestureOnRoot(      root,      finishedWork,      recoverableErrors,      enableProfilerTimer        ? suspendedCommitReason === IMMEDIATE_COMMIT          ? completedRenderEndTime          : commitStartTime        : 0,    );    return;  }  // If there are pending passive effects, schedule a callback to process them.  // Do this as early as possible, so it is queued before anything else that  // might get scheduled in the commit phase. (See #16714.)  // TODO: Delete all other places that schedule the passive effect callback  // They're redundant.  let passiveSubtreeMask;  if (enableViewTransition) {    pendingViewTransitionEvents = null;    if (includesOnlyViewTransitionEligibleLanes(lanes)) {      // Claim any pending Transition Types for this commit.      // This means that multiple roots committing independent View Transitions      // 1) end up staggered because we can only have one at a time.      // 2) only the first one gets all the Transition Types.      pendingTransitionTypes = ReactSharedInternals.V;      ReactSharedInternals.V = null;      passiveSubtreeMask = PassiveTransitionMask;    } else {      pendingTransitionTypes = null;      passiveSubtreeMask = PassiveMask;    }  } else {    passiveSubtreeMask = PassiveMask;  }   // If we don't have passive effects, we're not going to need to perform more work  // so we can clear the callback now.  root.callbackNode = null;  root.callbackPriority = NoLane;  resetShouldStartViewTransition();  // The commit phase is broken into several sub-phases. We do a separate pass  // of the effect list for each phase: all mutation effects come before all  // layout effects, and so on.  // Check if there are any effects in the whole tree.  // TODO: This is left over from the effect list implementation, where we had  // to check for the existence of `firstEffect` to satisfy Flow. I think the  // only other reason this optimization exists is because it affects profiling.  // Reconsider whether this is necessary.  const subtreeHasBeforeMutationEffects =    (finishedWork.subtreeFlags & (BeforeMutationMask | MutationMask)) !==    NoFlags;  const rootHasBeforeMutationEffect =    (finishedWork.flags & (BeforeMutationMask | MutationMask)) !== NoFlags;  if (subtreeHasBeforeMutationEffects || rootHasBeforeMutationEffect) {    const prevTransition = ReactSharedInternals.T;    ReactSharedInternals.T = null;    const previousPriority = getCurrentUpdatePriority();    setCurrentUpdatePriority(DiscreteEventPriority);    const prevExecutionContext = executionContext;    executionContext |= CommitContext;    try {      // 첫번째 "before mutaion" 단계.      // The first phase a "before mutation" phase. We use this phase to read the      // state of the host tree right before we mutate it. This is where      // getSnapshotBeforeUpdate is called.      commitBeforeMutationEffects(root, finishedWork, lanes);    } finally {      // Reset the priority to the previous non-sync value.      executionContext = prevExecutionContext;      setCurrentUpdatePriority(previousPriority);      ReactSharedInternals.T = prevTransition;    }  }  let willStartViewTransition = shouldStartViewTransition;  if (enableSwipeTransition) {    // Stop any gestures that were completed and is now being committed.    if (root.stoppingGestures !== null) {      stopCompletedGestures(root);      // If we are in the process of stopping some gesture we shouldn't start      // a View Transition because that would start from the previous state to      // the next state.      willStartViewTransition = false;    }  }  pendingEffectsStatus = PENDING_MUTATION_PHASE;  const startedViewTransition =    enableViewTransition &&    willStartViewTransition &&    startViewTransition(      root.containerInfo,      pendingTransitionTypes,      flushMutationEffects,      flushLayoutEffects,      flushAfterMutationEffects,      flushSpawnedWork,      flushPassiveEffects,      reportViewTransitionError,    );  if (!startedViewTransition) {    // Flush synchronously.    // 두번째 "mutaion" 단계. host tree(Dom 트리)를 변경하는 단계    flushMutationEffects();    // 세번째 "layout" 단계. host tree 변경 후 effects를 실행하는 단계    flushLayoutEffects();    // Skip flushAfterMutationEffects    flushSpawnedWork();  }}