React-reconciler | FiberRoot (19.0.0)

const root = ReactDOM.createRoot(document.getElementById('root'));를 통해 생성되는 Fiber 트리의 최상위입니다. FiberRoot를 통해 현재 화면에 렌더링된 트리(current)와 새로운 트리(alternate)를 관리합니다.

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

type BaseFiberRootProperties = {
  tag: RootTag,
  containerInfo: Container,
  pendingChildren: any,
  current: Fiber,
  pingCache: WeakMap<Wakeable, Set<mixed>> | Map<Wakeable, Set<mixed>> | null,
  finishedWork: Fiber | null,
  timeoutHandle: TimeoutHandle | NoTimeout,
  cancelPendingCommit: null | (() => void),
  context: Object | null,
  pendingContext: Object | null,
  next: FiberRoot | null,
  callbackNode: any,
  callbackPriority: Lane,
  expirationTimes: LaneMap<number>,
  hiddenUpdates: LaneMap<Array<ConcurrentUpdate> | null>,
  pendingLanes: Lanes,
  suspendedLanes: Lanes,
  pingedLanes: Lanes,
  warmLanes: Lanes,
  expiredLanes: Lanes,
  errorRecoveryDisabledLanes: Lanes,
  shellSuspendCounter: number,
  finishedLanes: Lanes,
  entangledLanes: Lanes,
  entanglements: LaneMap<Lanes>,
  pooledCache: Cache | null,
  pooledCacheLanes: Lanes,
  identifierPrefix: string,
  onUncaughtError: (
    error: mixed,
    errorInfo: {+componentStack?: ?string},
  ) => void,
  onCaughtError: (
    error: mixed,
    errorInfo: {
      +componentStack?: ?string,
      +errorBoundary?: ?React$Component<any, any>,
    },
  ) => void,
  onRecoverableError: (
    error: mixed,
    errorInfo: {+componentStack?: ?string},
  ) => void,
 
  formState: ReactFormState<any, any> | null,
};
 
type UpdaterTrackingOnlyFiberRootProperties = {
  memoizedUpdaters: Set<Fiber>,
  pendingUpdatersLaneMap: LaneMap<Set<Fiber>>,
};
 
export type SuspenseHydrationCallbacks = {
  onHydrated?: (suspenseInstance: SuspenseInstance) => void,
  onDeleted?: (suspenseInstance: SuspenseInstance) => void,
  ...
};
 
type SuspenseCallbackOnlyFiberRootProperties = {
  hydrationCallbacks: null | SuspenseHydrationCallbacks,
};
 
export type TransitionTracingCallbacks = {
  onTransitionStart?: (transitionName: string, startTime: number) => void,
  onTransitionProgress?: (
    transitionName: string,
    startTime: number,
    currentTime: number,
    pending: Array<{name: null | string}>,
  ) => void,
  onTransitionIncomplete?: (
    transitionName: string,
    startTime: number,
    deletions: Array<{
      type: string,
      name?: string | null,
      endTime: number,
    }>,
  ) => void,
  onTransitionComplete?: (
    transitionName: string,
    startTime: number,
    endTime: number,
  ) => void,
  onMarkerProgress?: (
    transitionName: string,
    marker: string,
    startTime: number,
    currentTime: number,
    pending: Array<{name: null | string}>,
  ) => void,
  onMarkerIncomplete?: (
    transitionName: string,
    marker: string,
    startTime: number,
    deletions: Array<{
      type: string,
      name?: string | null,
      endTime: number,
    }>,
  ) => void,
  onMarkerComplete?: (
    transitionName: string,
    marker: string,
    startTime: number,
    endTime: number,
  ) => void,
};
 
type TransitionTracingOnlyFiberRootProperties = {
  transitionCallbacks: null | TransitionTracingCallbacks,
  transitionLanes: Array<Set<Transition> | null>,
  incompleteTransitions: Map<Transition, TracingMarkerInstance>,
};
 
type ProfilerCommitHooksOnlyFiberRootProperties = {
  effectDuration: number,
  passiveEffectDuration: number,
};
 
export type FiberRoot = {
  ...BaseFiberRootProperties,
  ...SuspenseCallbackOnlyFiberRootProperties,
  ...UpdaterTrackingOnlyFiberRootProperties,
  ...TransitionTracingOnlyFiberRootProperties,
  ...ProfilerCommitHooksOnlyFiberRootProperties,
};

BaseFiberRootProperties

tag

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

export type RootTag = 0 | 1;
export const LegacyRoot = 0;
export const ConcurrentRoot = 1;

레거시 동작인지 동시성 모드를 지원하는지 나타냅니다.

containerInfo

react/packages/react-dom-bindings/src/clients/ReactFiberConfigDOM.js

export type Container =
  | interface extends Element {_reactRootContainer?: FiberRoot}
  | interface extends Document {_reactRootContainer?: FiberRoot}
  | interface extends DocumentFragment {_reactRootContainer?: FiberRoot};

렌더링될 DOM(document.getElementById('root'))에 대한 참조입니다.

pendingChildren

아직 렌더링되지 않은 자식 요소를 저장합니다.

current

현재 렌더링된 Fiber tree입니다.

pingCache

비동기 작업(예: Suspense)을 관리하기 위한 캐시입니다.

finishedWork

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

export function performWorkOnRoot(
  root: FiberRoot,
  lanes: Lanes,
  forceSync: boolean,
): void {
  ...
  const finishedWork: Fiber = (root.current.alternate: any);
  ...
}

렌더링이 완료된 Fiber 트리입니다.

timeoutHandle

특정 작업이 지연되었을 때 사용됩니다.

cancelPendingCommit

진행 중인 커밋을 취소하는 함수입니다.

context

React Context의 현재 상태입니다.

pendingContext

업데이트 대기 중인 React Context 상태입니다.

next

다음으로 처리할 FiberRoot를 나타냅니다.

callbackNode

우선순위가 높은 Node(예: 작업 스케줄링)입니다.

callbackPriority

현재 콜백의 우선순위를 나타냅니다.

expirationTimes

각 Lane(작업 단위)의 만료 시간을 저장합니다.

hiddenUpdates

숨겨진 업데이트를 관리합니다.

pendingLanes

처리 대기 중인 Lane 집합입니다.

suspendedLanes

(Suspense fallback)중단된 Lane 집합입니다.

pingedLanes

(Suspense children)활성화된 Lane 집합입니다.

warmLanes

캐싱된 Lane 집합입니다.

expiredLanes

만료된 Lane 집합입니다.

errorRecoveryDisabledLanes

에러 복구가 비활성화된 Lane 집합입니다.

shellSuspendCounter

Suspense 쉘이 중단된 횟수를 추적합니다.

finishedLanes

완료된 Lane 집합입니다.

entangledLanes

얽혀 있는 Lane 집합입니다.

entanglements

Lane 간의 의존성을 추적합니다.

pooledCache

재사용 가능한 캐시 객체입니다.

pooledCacheLanes

캐싱된 Lane 집합입니다.

identifierPrefix

HTML 요소의 ID에 붙는 접두사입니다.

onUncaughtError

처리되지 않은 에러가 발생했을 때 호출되는 콜백입니다.

onCaughtError

에러가 경계(boundary) 내에서 처리되었을 때 호출되는 콜백입니다.

onRecoverableError

복구 가능한 에러가 발생했을 때 호출되는 콜백입니다.

formState

React Forms의 상태를 추적합니다.

SuspenseCallbackOnlyFiberRootProperties

onHydrated

Suspense 인스턴스가 수화된 후 호출됩니다.

onDeleted

Suspense 인스턴스가 삭제된 후 호출됩니다.

UpdaterTrackingOnlyFiberRootProperties

memoizedUpdaters

메모이제이션된 업데이트를 추적합니다.

pendingUpdatersLaneMap

업데이트가 대기 중인 Fiber들의 Lane 맵입니다.

TransitionTracingOnlyFiberRootProperties

transitionCallbacks

전환과 관련된 콜백을 저장합니다.

transitionLanes

전환 작업이 할당된 Lane들을 저장합니다.

incompleteTransitions

완료되지 않은 전환을 저장합니다.

ProfilerCommitHooksOnlyFiberRootProperties

effectDuration

렌더링 사이클에서 실행된 모든 이펙트의 총 지속 시간입니다.

passiveEffectDuration

useEffect 실행 시간입니다.

Fiber Stack Fiber