@types/react-reconciler

property componentStack

componentStack?: string;

property height

height: number;

property width

width: number;

property x

x: number;

property y

y: number;

property $$typeof

$$typeof: symbol | number;

property value

value: React$AbstractComponent<never, unknown>;

property context

context: ReactContext<T>;

property next

next: ContextDependency<unknown> | null;

property observedBits

observedBits: number;

property firstContext

firstContext: ContextDependency<unknown> | null;

property lanes

lanes: Lanes;

property bundleType

bundleType: BundleType;

property findFiberByHostInstance

findFiberByHostInstance?: (instance: Instance | TextInstance) => Fiber | null;

property rendererConfig

rendererConfig?: RendererInspectionConfig;

property rendererPackageName

rendererPackageName: string;

property version

version: string;

property actualDuration

actualDuration?: number;

property actualStartTime

actualStartTime?: number;

property alternate

alternate: Fiber | null;

property child

child: Fiber | null;

property childLanes

childLanes: Lanes;

property deletions

deletions: Fiber[] | null;

property dependencies

dependencies: Dependencies | null;

property elementType

elementType: any;

property firstEffect

firstEffect: Fiber | null;

property flags

flags: Flags;

property index

index: number;

property key

key: null | string;

property lanes

lanes: Lanes;

property lastEffect

lastEffect: Fiber | null;

property memoizedProps

memoizedProps: any;

property memoizedState

memoizedState: any;

property mode

mode: TypeOfMode;

property nextEffect

nextEffect: Fiber | null;

property pendingProps

pendingProps: any;

property ref

ref:
    | null
    | (((handle: unknown) => void) & {
          _stringRef?: string | null;
      })
    | RefObject;

property return

return: Fiber | null;

property selfBaseDuration

selfBaseDuration?: number;

property sibling

sibling: Fiber | null;

property stateNode

stateNode: any;

property subtreeFlags

subtreeFlags: Flags;

property tag

tag: WorkTag;

property treeBaseDuration

treeBaseDuration?: number;

property type

type: any;

property updateQueue

updateQueue: unknown;

property $$typeof

$$typeof: symbol | number;

property value

value: Selector[];

property extraDevToolsConfig

extraDevToolsConfig: RendererInspectionConfig | null;

• Extra renderer-specific configuration exposed to React DevTools as rendererConfig. Return null if you have nothing to expose.

property HostTransitionContext

HostTransitionContext: ReactContext<TransitionStatus>;

property isPrimaryRenderer

isPrimaryRenderer: boolean;

• This is a property (not a function) that should be set to true if your renderer is the main one on the page. For example, if you're writing a renderer for the Terminal, it makes sense to set it to true, but if your renderer is used *on top of* React DOM or some other existing renderer, set it to false.

property noTimeout

noTimeout: NoTimeout;

• This is a property (not a function) that should be set to something that can never be a valid timeout ID. For example, you can set it to -1.

property NotPendingTransition

NotPendingTransition: TransitionStatus | null;

property rendererPackageName

rendererPackageName: string;

• The npm package name of your renderer, reported to React DevTools.

property rendererVersion

rendererVersion: string;

• The version of your renderer. React DevTools reports this alongside the reconciler version, which may differ for third-party renderers.

property supportsHydration

supportsHydration: boolean;

property supportsMicrotasks

supportsMicrotasks?: boolean;

• Set this to true to indicate that your renderer supports scheduleMicrotask. We use microtasks as part of our discrete event implementation in React DOM. If you're not sure if your renderer should support this, you probably should. The option to not implement scheduleMicrotask exists so that platforms with more control over user events, like React Native, can choose to use a different mechanism.

property supportsMutation

supportsMutation: boolean;

• The reconciler has two modes: mutation mode and persistent mode. You must specify one of them.

  If your target platform is similar to the DOM and has methods similar to appendChild, removeChild, and so on, you'll want to use the **mutation mode**. This is the same mode used by React DOM, React ART, and the classic React Native renderer.

  const HostConfig = {
    // ...
    supportsMutation: true,
    // ...
  }

  Depending on the mode, the reconciler will call different methods on your host config.

  If you're not sure which one you want, you likely need the mutation mode.

property supportsPersistence

supportsPersistence: boolean;

• The reconciler has two modes: mutation mode and persistent mode. You must specify one of them.

  If your target platform has immutable trees, you'll want the **persistent mode** instead. In that mode, existing nodes are never mutated, and instead every change clones the parent tree and then replaces the whole parent tree at the root. This is the node used by the new React Native renderer, codenamed "Fabric".

  const HostConfig = {
    // ...
    supportsPersistence: true,
    // ...
  }

  Depending on the mode, the reconciler will call different methods on your host config.

  If you're not sure which one you want, you likely need the mutation mode.

property supportsResources

supportsResources?: boolean;

• Set this to true if your renderer supports Resources, e.g. hoistable <link>/<style>/<script> tags that get deduplicated and hoisted regardless of where in the tree they are rendered. See the "Resources" section [listed in this file](https://github.com/facebook/react/blob/master/packages/react-reconciler/src/forks/ReactFiberConfig.custom.js) for the rest of the methods you need to implement.

property supportsSingletons

supportsSingletons?: boolean;

• Set this to true if your renderer supports Singletons, i.e. built-in host components that always exist as a single instance per root and are never created or removed, such as <html>, <head>, and <body> in React DOM.

property supportsTestSelectors

supportsTestSelectors?: boolean;

• Set this to true to support the test selector API, i.e. findAllNodes/findBoundingRects/focusWithin/observeVisibleRects on the Reconciler instance.

property warnsIfNotActing

warnsIfNotActing?: boolean;

• Whether the renderer shouldn't trigger missing act() warnings

method acquireResource

acquireResource: (
    hoistableRoot: HoistableRoot,
    resource: Resource,
    props: Props
) => null | Instance;

method acquireSingletonInstance

acquireSingletonInstance: (
    type: Type,
    props: Props,
    instance: Instance,
    internalInstanceHandle: OpaqueHandle
) => void;

method afterActiveInstanceBlur

afterActiveInstanceBlur: () => void;

method appendChild

appendChild: (parentInstance: Instance, child: Instance | TextInstance) => void;

• This method should mutate the parentInstance and add the child to its list of children. For example, in the DOM this would translate to a parentInstance.appendChild(child) call.

  Although this method currently runs in the commit phase, you still should not mutate any other nodes in it. If you need to do some additional work when a node is definitely connected to the visible tree, look at commitMount.

method appendChildToContainer

appendChildToContainer: (
    container: Container,
    child: Instance | TextInstance
) => void;

• Same as appendChild, but for when a node is attached to the root container. This is useful if attaching to the root has a slightly different implementation, or if the root container nodes are of a different type than the rest of the tree.

method appendChildToContainerChildSet

appendChildToContainerChildSet: (
    childSet: ChildSet,
    child: Instance | TextInstance
) => void;

method appendInitialChild

appendInitialChild: (
    parentInstance: Instance,
    child: Instance | TextInstance
) => void;

• This method should mutate the parentInstance and add the child to its list of children. For example, in the DOM this would translate to a parentInstance.appendChild(child) call.

  This method happens **in the render phase**. It can mutate parentInstance and child, but it must not modify any other nodes. It's called while the tree is still being built up and not connected to the actual tree on the screen.

method beforeActiveInstanceBlur

beforeActiveInstanceBlur: () => void;

method bindToConsole

bindToConsole: (methodName: string, args: any[], badgeName: string) => () => any;

• Binds a console method call (as captured by React's replaying of Server console logs on the client) so it can be invoked later, optionally tagging it with an environment name badge.

method cancelTimeout

cancelTimeout: (id: TimeoutHandle) => void;

• You can proxy this to clearTimeout or its equivalent in your environment.

method canHydrateActivityInstance

canHydrateActivityInstance: (
    instance: HydratableInstance,
    inRootOrSingleton: boolean
) => null | ActivityInstance;

method canHydrateFormStateMarker

canHydrateFormStateMarker: (
    instance: HydratableInstance,
    inRootOrSingleton: boolean
) => FormStateMarkerInstance | null;

method canHydrateInstance

canHydrateInstance: (
    instance: HydratableInstance,
    type: Type,
    props: Props,
    inRootOrSingleton: boolean
) => null | Instance;

method canHydrateSuspenseInstance

canHydrateSuspenseInstance: (
    instance: HydratableInstance,
    inRootOrSingleton: boolean
) => null | SuspenseInstance;

method canHydrateTextInstance

canHydrateTextInstance: (
    instance: HydratableInstance,
    text: string,
    inRootOrSingleton: boolean
) => null | TextInstance;

method clearActivityBoundary

clearActivityBoundary: (
    parentInstance: Instance,
    activityInstance: ActivityInstance
) => void;

method clearActivityBoundaryFromContainer

clearActivityBoundaryFromContainer: (
    container: Container,
    activityInstance: ActivityInstance
) => void;

method clearContainer

clearContainer: (container: Container) => void;

• This method should mutate the container root node and remove all children from it.

method clearSuspenseBoundary

clearSuspenseBoundary: (
    parentInstance: Instance,
    suspenseInstance: SuspenseInstance
) => void;

method clearSuspenseBoundaryFromContainer

clearSuspenseBoundaryFromContainer: (
    container: Container,
    suspenseInstance: SuspenseInstance
) => void;

method cloneHiddenInstance

cloneHiddenInstance: (
    instance: Instance,
    type: Type,
    props: Props,
    internalInstanceHandle: OpaqueHandle
) => Instance;

method cloneHiddenTextInstance

cloneHiddenTextInstance: (
    instance: Instance,
    text: Type,
    internalInstanceHandle: OpaqueHandle
) => TextInstance;

method cloneInstance

cloneInstance: (
    instance: Instance,
    type: Type,
    oldProps: Props,
    newProps: Props,
    keepChildren: boolean,
    recyclableInstance: null | Instance
) => Instance;

method commitHydratedActivityInstance

commitHydratedActivityInstance: (activityInstance: ActivityInstance) => void;

method commitHydratedContainer

commitHydratedContainer: (container: Container) => void;

method commitHydratedInstance

commitHydratedInstance: (
    instance: Instance,
    type: Type,
    props: Props,
    internalHandle: OpaqueHandle
) => void;

method commitHydratedSuspenseInstance

commitHydratedSuspenseInstance: (suspenseInstance: SuspenseInstance) => void;

method commitMount

commitMount: (
    instance: Instance,
    type: Type,
    props: Props,
    internalInstanceHandle: OpaqueHandle
) => void;

• This method is only called if you returned true from finalizeInitialChildren for this instance.

  It lets you do some additional work after the node is actually attached to the tree on the screen for the first time. For example, the DOM renderer uses it to trigger focus on nodes with the autoFocus attribute.

  Note that commitMount does not mirror removeChild one to one because removeChild is only called for the top-level removed node. This is why ideally commitMount should not mutate any nodes other than the instance itself. For example, if it registers some events on some node above, it will be your responsibility to traverse the tree in removeChild and clean them up, which is not ideal.

  The internalHandle data structure is meant to be opaque. If you bend the rules and rely on its internal fields, be aware that it may change significantly between versions. You're taking on additional maintenance risk by reading from it, and giving up all guarantees if you write something to it.

  If you never return true from finalizeInitialChildren, you can leave it empty.

method commitTextUpdate

commitTextUpdate: (
    textInstance: TextInstance,
    oldText: string,
    newText: string
) => void;

• This method should mutate the textInstance and update its text content to nextText.

  Here, textInstance is a node created by createTextInstance.

method commitUpdate

commitUpdate: (
    instance: Instance,
    type: Type,
    prevProps: Props,
    nextProps: Props,
    internalHandle: OpaqueHandle
) => void;

• This method should mutate the instance to match nextProps.

  The internalHandle data structure is meant to be opaque. If you bend the rules and rely on its internal fields, be aware that it may change significantly between versions. You're taking on additional maintenance risk by reading from it, and giving up all guarantees if you write something to it.

method createContainerChildSet

createContainerChildSet: (container: Container) => ChildSet;

method createHoistableInstance

createHoistableInstance: (
    type: Type,
    props: Props,
    rootContainerInstance: Container,
    internalInstanceHandle: OpaqueHandle
) => Instance;

method createInstance

createInstance: (
    type: Type,
    props: Props,
    rootContainer: Container,
    hostContext: HostContext,
    internalHandle: OpaqueHandle
) => Instance;

• This method should return a newly created node. For example, the DOM renderer would call document.createElement(type) here and then set the properties from props.

  You can use rootContainer to access the root container associated with that tree. For example, in the DOM renderer, this is useful to get the correct document reference that the root belongs to.

  The hostContext parameter lets you keep track of some information about your current place in the tree. To learn more about it, see getChildHostContext below.

  The internalHandle data structure is meant to be opaque. If you bend the rules and rely on its internal fields, be aware that it may change significantly between versions. You're taking on additional maintenance risk by reading from it, and giving up all guarantees if you write something to it.

  This method happens **in the render phase**. It can (and usually should) mutate the node it has just created before returning it, but it must not modify any other nodes. It must not register any event handlers on the parent tree. This is because an instance being created doesn't guarantee it would be placed in the tree — it could be left unused and later collected by GC. If you need to do something when an instance is definitely in the tree, look at commitMount instead.

method createTextInstance

createTextInstance: (
    text: string,
    rootContainer: Container,
    hostContext: HostContext,
    internalHandle: OpaqueHandle
) => TextInstance;

• Same as createInstance, but for text nodes. If your renderer doesn't support text nodes, you can throw here.

method describeHydratableInstanceForDevWarnings

describeHydratableInstanceForDevWarnings: (
    instance: HydratableInstance
) => string | HydratableInstanceDescription;

method detachDeletedInstance

detachDeletedInstance: (node: Instance) => void;

method diffHydratedPropsForDevWarnings

diffHydratedPropsForDevWarnings: (
    instance: Instance,
    type: Type,
    props: Props,
    hostContext: HostContext
) => Props | null;

• Replaces the removed didNotMatchHydrated* / didNotFindHydratable* dev warnings.

method diffHydratedTextForDevWarnings

diffHydratedTextForDevWarnings: (
    textInstance: TextInstance,
    text: string,
    parentProps: Props | null
) => string | null;

method finalizeContainerChildren

finalizeContainerChildren: (container: Container, newChildren: ChildSet) => void;

method finalizeHydratedChildren

finalizeHydratedChildren: (
    instance: Instance,
    type: Type,
    props: Props,
    hostContext: HostContext
) => boolean;

method finalizeInitialChildren

finalizeInitialChildren: (
    instance: Instance,
    type: Type,
    props: Props,
    rootContainer: Container,
    hostContext: HostContext
) => boolean;

• In this method, you can perform some final mutations on the instance. Unlike with createInstance, by the time finalizeInitialChildren is called, all the initial children have already been added to the instance, but the instance itself has not yet been connected to the tree on the screen.

  This method happens **in the render phase**. It can mutate instance, but it must not modify any other nodes. It's called while the tree is still being built up and not connected to the actual tree on the screen.

  There is a second purpose to this method. It lets you specify whether there is some work that needs to happen when the node is connected to the tree on the screen. If you return true, the instance will receive a commitMount call later. See its documentation below.

  If you don't want to do anything here, you should return false.

method findFiberRoot

findFiberRoot: (node: Instance) => null | FiberRoot;

method flushHydrationEvents

flushHydrationEvents: () => void;

method getBoundingRect

getBoundingRect: (node: Instance) => BoundingRect;

method getChildHostContext

getChildHostContext: (parentHostContext: HostContext, type: Type) => HostContext;

• Host context lets you track some information about where you are in the tree so that it's available inside createInstance as the hostContext parameter. For example, the DOM renderer uses it to track whether it's inside an HTML or an SVG tree, because createInstance implementation needs to be different for them.

  If the node of this type does not influence the context you want to pass down, you can return parentHostContext. Alternatively, you can return any custom object representing the information you want to pass down.

  If you don't want to do anything here, return parentHostContext.

  This method happens **in the render phase**. Do not mutate the tree from it.

method getCurrentUpdatePriority

getCurrentUpdatePriority: () => EventPriority;

method getFirstHydratableChild

getFirstHydratableChild: (
    parentInstance: Container | Instance
) => null | HydratableInstance;

method getFirstHydratableChildWithinActivityInstance

getFirstHydratableChildWithinActivityInstance: (
    parentInstance: ActivityInstance
) => HydratableInstance | null;

method getFirstHydratableChildWithinContainer

getFirstHydratableChildWithinContainer: (
    parentContainer: Container
) => HydratableInstance | null;

method getFirstHydratableChildWithinSingleton

getFirstHydratableChildWithinSingleton: (
    type: Type,
    singletonInstance: Instance,
    currentHydratableInstance: HydratableInstance | null
) => HydratableInstance | null;

method getFirstHydratableChildWithinSuspenseInstance

getFirstHydratableChildWithinSuspenseInstance: (
    parentInstance: SuspenseInstance
) => HydratableInstance | null;

method getHoistableRoot

getHoistableRoot: (container: Container) => HoistableRoot;

method getInstanceFromNode

getInstanceFromNode: (node: any) => Fiber | null | undefined;

method getInstanceFromScope

getInstanceFromScope: (scopeInstance: any) => null | Instance;

method getNextHydratableInstanceAfterActivityInstance

getNextHydratableInstanceAfterActivityInstance: (
    activityInstance: ActivityInstance
) => null | HydratableInstance;

method getNextHydratableInstanceAfterSuspenseInstance

getNextHydratableInstanceAfterSuspenseInstance: (
    suspenseInstance: SuspenseInstance
) => null | HydratableInstance;

method getNextHydratableSibling

getNextHydratableSibling: (
    instance: HydratableInstance
) => null | HydratableInstance;

method getNextHydratableSiblingAfterSingleton

getNextHydratableSiblingAfterSingleton: (
    type: Type,
    currentHydratableInstance: HydratableInstance | null
) => HydratableInstance | null;

method getPublicInstance

getPublicInstance: (instance: Instance | TextInstance) => PublicInstance;

• Determines what object gets exposed as a ref. You'll likely want to return the instance itself. But in some cases it might make sense to only expose some part of it.

  If you don't want to do anything here, return instance.

method getResource

getResource: (
    type: Type,
    currentProps: Props | null,
    pendingProps: Props,
    currentResource: null | Resource
) => null | Resource;

method getRootHostContext

getRootHostContext: (rootContainer: Container) => HostContext | null;

• This method lets you return the initial host context from the root of the tree. See getChildHostContext for the explanation of host context.

  If you don't intend to use host context, you can return null.

  This method happens **in the render phase**. Do not mutate the tree from it.

method getSuspendedCommitReason

getSuspendedCommitReason: (
    state: SuspendedState,
    rootContainer: Container
) => null | string;

• This method is called when a commit is suspended, to record why. It is only called when the profiler is enabled, and the result is attached to the pending commit. Return null if there's nothing to report.

method getSuspenseInstanceFallbackErrorDetails

getSuspenseInstanceFallbackErrorDetails: (
    instance: SuspenseInstance
) => SuspenseInstanceFallbackErrorDetails;

method getTextContent

getTextContent: (fiber: Fiber) => string | null;

method hideDehydratedBoundary

hideDehydratedBoundary: (suspenseInstance: SuspenseInstance) => void;

method hideInstance

hideInstance: (instance: Instance) => void;

• This method should make the instance invisible without removing it from the tree. For example, it can apply visual styling to hide it. It is used by Suspense to hide the tree while the fallback is visible.

method hideTextInstance

hideTextInstance: (textInstance: TextInstance) => void;

• Same as hideInstance, but for nodes created by createTextInstance.

method hydrateActivityInstance

hydrateActivityInstance: (
    activityInstance: ActivityInstance,
    internalInstanceHandle: any
) => void;

method hydrateHoistable

hydrateHoistable: (
    hoistableRoot: HoistableRoot,
    type: Type,
    props: Props,
    internalInstanceHandle: OpaqueHandle
) => Instance;

method hydrateInstance

hydrateInstance: (
    instance: Instance,
    type: Type,
    props: Props,
    hostContext: HostContext,
    internalInstanceHandle: any
) => boolean;

method hydrateSuspenseInstance

hydrateSuspenseInstance: (
    suspenseInstance: SuspenseInstance,
    internalInstanceHandle: any
) => void;

method hydrateTextInstance

hydrateTextInstance: (
    textInstance: TextInstance,
    text: string,
    internalInstanceHandle: any,
    parentProps: null | Props
) => boolean;

method insertBefore

insertBefore: (
    parentInstance: Instance,
    child: Instance | TextInstance,
    beforeChild: Instance | TextInstance | SuspenseInstance
) => void;

• This method should mutate the parentInstance and place the child before beforeChild in the list of its children. For example, in the DOM this would translate to a parentInstance.insertBefore(child, beforeChild) call.

  Note that React uses this method both for insertions and for reordering nodes. Similar to DOM, it is expected that you can call insertBefore to reposition an existing child. Do not mutate any other parts of the tree from it.

method insertInContainerBefore

insertInContainerBefore: (
    container: Container,
    child: Instance | TextInstance,
    beforeChild: Instance | TextInstance | SuspenseInstance
) => void;

• Same as insertBefore, but for when a node is attached to the root container. This is useful if attaching to the root has a slightly different implementation, or if the root container nodes are of a different type than the rest of the tree.

method isFormStateMarkerMatching

isFormStateMarkerMatching: (markerInstance: FormStateMarkerInstance) => boolean;

method isHiddenSubtree

isHiddenSubtree: (fiber: Fiber) => boolean;

method isHostHoistableType

isHostHoistableType: (
    type: Type,
    props: Props,
    hostContext: HostContext
) => boolean;

method isHostSingletonType

isHostSingletonType: (type: Type) => boolean;

method isSingletonScope

isSingletonScope: (type: Type) => boolean;

method isSuspenseInstanceFallback

isSuspenseInstanceFallback: (instance: SuspenseInstance) => boolean;

method isSuspenseInstancePending

isSuspenseInstancePending: (instance: SuspenseInstance) => boolean;

method matchAccessibilityRole

matchAccessibilityRole: (node: Instance, role: string) => boolean;

method mayResourceSuspendCommit

mayResourceSuspendCommit: (resource: Resource) => boolean;

method maySuspendCommit

maySuspendCommit: (type: Type, props: Props) => boolean;

• This method is called during render to determine if the Host Component type and props require some kind of loading process to complete before committing an update.

method maySuspendCommitInSyncRender

maySuspendCommitInSyncRender: (type: Type, props: Props) => boolean;

• This method is called during a sync render to determine if the Host Component type and props are still allowed to suspend the commit. Host configs that don't want to suspend sync commits should always return false.

method maySuspendCommitOnUpdate

maySuspendCommitOnUpdate: (
    type: Type,
    oldProps: Props,
    newProps: Props
) => boolean;

• Same as maySuspendCommit, but called for an update to an existing instance instead of its initial mount, so it receives both the old and new props.

method mountHoistable

mountHoistable: (
    hoistableRoot: HoistableRoot,
    type: Type,
    instance: Instance
) => void;

method preloadInstance

preloadInstance: (instance: Instance, type: Type, props: Props) => boolean;

• This method may be called during render if the Host Component type and props might suspend a commit. It can be used to initiate any work that might shorten the duration of a suspended commit.

method preloadResource

preloadResource: (resource: Resource) => boolean;

method prepareForCommit

prepareForCommit: (containerInfo: Container) => Record<string, any> | null;

• This method lets you store some information before React starts making changes to the tree on the screen. For example, the DOM renderer stores the current text selection so that it can later restore it. This method is mirrored by resetAfterCommit.

  Even if you don't want to do anything here, you need to return null from it.

method preparePortalMount

preparePortalMount: (containerInfo: Container) => void;

• This method is called for a container that's used as a portal target. Usually you can leave it empty.

method prepareScopeUpdate

prepareScopeUpdate: (scopeInstance: any, instance: any) => void;

method prepareToCommitHoistables

prepareToCommitHoistables: () => void;

method registerSuspenseInstanceRetry

registerSuspenseInstanceRetry: (
    instance: SuspenseInstance,
    callback: () => void
) => void;

method releaseResource

releaseResource: (resource: Resource) => void;

method releaseSingletonInstance

releaseSingletonInstance: (instance: Instance) => void;

method removeChild

removeChild: (
    parentInstance: Instance,
    child: Instance | TextInstance | SuspenseInstance
) => void;

• This method should mutate the parentInstance to remove the child from the list of its children.

  React will only call it for the top-level node that is being removed. It is expected that garbage collection would take care of the whole subtree. You are not expected to traverse the child tree in it.

method removeChildFromContainer

removeChildFromContainer: (
    container: Container,
    child: Instance | TextInstance | SuspenseInstance
) => void;

• Same as removeChild, but for when a node is detached from the root container. This is useful if attaching to the root has a slightly different implementation, or if the root container nodes are of a different type than the rest of the tree.

method replaceContainerChildren

replaceContainerChildren: (container: Container, newChildren: ChildSet) => void;

method requestPostPaintCallback

requestPostPaintCallback: (callback: (time: number) => void) => void;

method resetAfterCommit

resetAfterCommit: (containerInfo: Container) => void;

• This method is called right after React has performed the tree mutations. You can use it to restore something you've stored in prepareForCommit — for example, text selection.

  You can leave it empty.

method resetFormInstance

resetFormInstance: (form: FormInstance) => void;

method resetTextContent

resetTextContent: (instance: Instance) => void;

• If you returned true from shouldSetTextContent for the previous props, but returned false from shouldSetTextContent for the next props, React will call this method so that you can clear the text content you were managing manually. For example, in the DOM you could set node.textContent = ''.

  If you never return true from shouldSetTextContent, you can leave it empty.

method resolveEventTimeStamp

resolveEventTimeStamp: () => number;

method resolveEventType

resolveEventType: () => null | string;

method resolveSingletonInstance

resolveSingletonInstance: (
    type: Type,
    props: Props,
    rootContainerInstance: Container,
    hostContext: HostContext,
    validateDOMNestingDev: boolean
) => Instance;

method resolveUpdatePriority

resolveUpdatePriority: () => EventPriority;

method scheduleMicrotask

scheduleMicrotask: (fn: () => unknown) => void;

• Optional. You can proxy this to queueMicrotask or its equivalent in your environment.

method scheduleTimeout

scheduleTimeout: (
    fn: (...args: unknown[]) => unknown,
    delay?: number
) => TimeoutHandle;

• You can proxy this to setTimeout or its equivalent in your environment.

method setCurrentUpdatePriority

setCurrentUpdatePriority: (newPriority: EventPriority) => void;

method setFocusIfFocusable

setFocusIfFocusable: (node: Instance) => boolean;

• The reconciler always calls this with just the node; host-specific focus options (such as the DOM's FocusOptions) are not passed through.

method setupIntersectionObserver

setupIntersectionObserver: (
    targets: Instance[],
    callback: (
        intersections: Array<{ ratio: number; rect: BoundingRect }>
    ) => void,
    options?: IntersectionObserverOptions
) => {
    disconnect: () => void;
    observe: (instance: Instance) => void;
    unobserve: (instance: Instance) => void;
};

method shouldAttemptEagerTransition

shouldAttemptEagerTransition: () => boolean;

method shouldDeleteUnhydratedTailInstances

shouldDeleteUnhydratedTailInstances: (parentType: Type) => boolean;

method shouldSetTextContent

shouldSetTextContent: (type: Type, props: Props) => boolean;

• Some target platforms support setting an instance's text content without manually creating a text node. For example, in the DOM, you can set node.textContent instead of creating a text node and appending it.

  If you return true from this method, React will assume that this node's children are text, and will not create nodes for them. It will instead rely on you to have filled that text during createInstance. This is a performance optimization. For example, the DOM renderer returns true only if type is a known text-only parent (like 'textarea') or if props.children has a 'string' type. If you return true, you will need to implement resetTextContent too.

  If you don't want to do anything here, you should return false.

  This method happens **in the render phase**. Do not mutate the tree from it.

method startSuspendingCommit

startSuspendingCommit: () => SuspendedState;

• This method is called just before the commit phase. Use it to set up any necessary state while any Host Components that might suspend this commit are evaluated to determine if the commit must be suspended.

method suspendInstance

suspendInstance: (
    state: SuspendedState,
    instance: Instance,
    type: Type,
    props: Props
) => void;

• This method is called after startSuspendingCommit for each Host Component that indicated it might suspend a commit.

method suspendOnActiveViewTransition

suspendOnActiveViewTransition: (
    state: SuspendedState,
    rootContainer: Container
) => void;

• This method is called after startSuspendingCommit if there is a View Transition currently active on the root that the commit should wait to finish before proceeding.

method suspendResource

suspendResource: (
    state: SuspendedState,
    hoistableRoot: HoistableRoot,
    resource: Resource,
    props: Props
) => void;

method trackSchedulerEvent

trackSchedulerEvent: () => void;

method unhideDehydratedBoundary

unhideDehydratedBoundary: (
    dehydratedInstance: SuspenseInstance | ActivityInstance
) => void;

method unhideInstance

unhideInstance: (instance: Instance, props: Props) => void;

• This method should make the instance visible, undoing what hideInstance did.

method unhideTextInstance

unhideTextInstance: (textInstance: TextInstance, text: string) => void;

• Same as unhideInstance, but for nodes created by createTextInstance.

method unmountHoistable

unmountHoistable: (instance: Instance) => void;

method validateHydratableInstance

validateHydratableInstance: (
    type: Type,
    props: Props,
    hostContext: HostContext
) => boolean;

method validateHydratableTextInstance

validateHydratableTextInstance: (
    text: string,
    hostContext: HostContext
) => boolean;

method waitForCommitToBeReady

waitForCommitToBeReady: (
    state: SuspendedState,
    timeoutOffset: number
) => (
    initiateCommit: (...args: unknown[]) => unknown
) => (...args: unknown[]) => unknown;

• This method is called after all suspendInstance calls are complete.

  Return null if the commit can happen immediately.

  Return (initiateCommit: Function) => Function if the commit must be suspended. The argument to this callback will initiate the commit when called. The return value is a cancellation function that the Reconciler can use to abort the commit.

property props

props: Readonly<Record<string, unknown>>;

property type

type: string;

property $$typeof

$$typeof: symbol | number;

property key

key: null | string;

property props

props: {
    children: (value: T) => ReactNode;
    unstable_observedBits?: number;
};

property ref

ref: null;

property type

type: ReactContext<T>;

property $$typeof

$$typeof: symbol | number;

property Consumer

Consumer: ReactContext<T>;

property displayName

displayName?: string;

property Provider

Provider: ReactProviderType<T>;

property $$typeof

$$typeof: symbol | number;