@types/react-reconciler
- Version 0.28.2
- Published
- 50.5 kB
- 1 dependency
- MIT license
Install
npm i @types/react-reconciler
yarn add @types/react-reconciler
pnpm add @types/react-reconciler
Overview
TypeScript definitions for react-reconciler
Index
Functions
Interfaces
HostConfig
- afterActiveInstanceBlur()
- appendChild()
- appendChildToContainer()
- appendChildToContainerChildSet()
- appendInitialChild()
- beforeActiveInstanceBlur()
- cancelTimeout()
- canHydrateInstance()
- canHydrateSuspenseInstance()
- canHydrateTextInstance()
- clearContainer()
- cloneHiddenInstance()
- cloneHiddenTextInstance()
- cloneInstance()
- commitHydratedContainer()
- commitHydratedSuspenseInstance()
- commitMount()
- commitTextUpdate()
- commitUpdate()
- createContainerChildSet()
- createInstance()
- createTextInstance()
- detachDeletedInstance()
- didNotFindHydratableContainerInstance()
- didNotFindHydratableContainerSuspenseInstance()
- didNotFindHydratableContainerTextInstance()
- didNotFindHydratableInstance()
- didNotFindHydratableSuspenseInstance()
- didNotFindHydratableTextInstance()
- didNotHydrateContainerInstance()
- didNotHydrateInstance()
- didNotMatchHydratedContainerTextInstance()
- didNotMatchHydratedTextInstance()
- errorHydratingContainer()
- finalizeContainerChildren()
- finalizeInitialChildren()
- getChildHostContext()
- getCurrentEventPriority()
- getFirstHydratableChild()
- getInstanceFromNode()
- getInstanceFromScope()
- getNextHydratableInstanceAfterSuspenseInstance()
- getNextHydratableSibling()
- getParentSuspenseInstance()
- getPublicInstance()
- getRootHostContext()
- hideInstance()
- hideTextInstance()
- hydrateInstance()
- hydrateSuspenseInstance()
- hydrateTextInstance()
- insertBefore()
- insertInContainerBefore()
- isPrimaryRenderer
- isSuspenseInstanceFallback()
- isSuspenseInstancePending()
- noTimeout
- prepareForCommit()
- preparePortalMount()
- prepareScopeUpdate()
- prepareUpdate()
- registerSuspenseInstanceRetry()
- removeChild()
- removeChildFromContainer()
- replaceContainerChildren()
- resetAfterCommit()
- resetTextContent()
- scheduleMicrotask()
- scheduleTimeout()
- shouldSetTextContent()
- supportsHydration
- supportsMicrotasks
- supportsMutation
- supportsPersistence
- unhideInstance()
- unhideTextInstance()
- warnsIfNotActing
Reconciler
- attemptContinuousHydration()
- attemptDiscreteHydration()
- attemptHydrationAtCurrentPriority()
- attemptSynchronousHydration()
- batchedUpdates()
- createComponentSelector()
- createContainer()
- createHasPseudoClassSelector()
- createHydrationContainer()
- createPortal()
- createRoleSelector()
- createTestNameSelector()
- createTextSelector()
- deferredUpdates()
- discreteUpdates()
- findAllNodes()
- findBoundingRects()
- findHostInstance()
- findHostInstanceWithNoPortals()
- findHostInstanceWithWarning()
- flushControlled()
- flushPassiveEffects()
- flushSync()
- focusWithin()
- getCurrentUpdatePriority()
- getFindAllNodesFailureDescription()
- getPublicRootInstance()
- injectIntoDevTools()
- isAlreadyRendering()
- observeVisibleRects()
- registerMutableSourceForHydration()
- runWithPriority()
- shouldError()
- shouldSuspend()
- updateContainer()
Type Aliases
Functions
function ReactReconciler
ReactReconciler: < Type, Props, Container, Instance, TextInstance, SuspenseInstance, HydratableInstance, PublicInstance, HostContext, UpdatePayload, ChildSet, TimeoutHandle, NoTimeout>( config: ReactReconciler.HostConfig< Type, Props, Container, Instance, TextInstance, SuspenseInstance, HydratableInstance, PublicInstance, HostContext, UpdatePayload, ChildSet, TimeoutHandle, NoTimeout >) => ReactReconciler.Reconciler< Container, Instance, TextInstance, SuspenseInstance, PublicInstance>;
Interfaces
interface BoundingRect
interface BoundingRect {}
interface ComponentSelector
interface ComponentSelector {}
interface ContextDependency
interface ContextDependency<T> {}
property context
context: ReactContext<T>;
property next
next: ContextDependency<unknown> | null;
property observedBits
observedBits: number;
interface Dependencies
interface Dependencies {}
property firstContext
firstContext: ContextDependency<unknown> | null;
property lanes
lanes: Lanes;
interface DevToolsConfig
interface DevToolsConfig<Instance, TextInstance, RendererInspectionConfig> {}
property bundleType
bundleType: BundleType;
property findFiberByHostInstance
findFiberByHostInstance?: (instance: Instance | TextInstance) => Fiber | null;
property rendererConfig
rendererConfig?: RendererInspectionConfig;
property rendererPackageName
rendererPackageName: string;
property version
version: string;
interface Fiber
interface Fiber {}
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;
interface HasPseudoClassSelector
interface HasPseudoClassSelector {}
interface HostConfig
interface HostConfig< Type, Props, Container, Instance, TextInstance, SuspenseInstance, HydratableInstance, PublicInstance, HostContext, UpdatePayload, ChildSet, TimeoutHandle, NoTimeout> {}
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 totrue
, but if your renderer is used *on top of* React DOM or some other existing renderer, set it tofalse
.
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 supportsHydration
supportsHydration: boolean;
property supportsMicrotasks
supportsMicrotasks?: boolean;
Set this to
true
to indicate that your renderer supportsscheduleMicrotask
. 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 implementscheduleMicrotask
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 warnsIfNotActing
warnsIfNotActing?: boolean;
Whether the renderer shouldn't trigger missing
act()
warnings
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 aparentInstance.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 aparentInstance.appendChild(child)
call.This method happens **in the render phase**. It can mutate
parentInstance
andchild
, 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 cancelTimeout
cancelTimeout: (id: TimeoutHandle) => void;
You can proxy this to
clearTimeout
or its equivalent in your environment.
method canHydrateInstance
canHydrateInstance: ( instance: HydratableInstance, type: Type, props: Props) => null | Instance;
method canHydrateSuspenseInstance
canHydrateSuspenseInstance: ( instance: HydratableInstance) => null | SuspenseInstance;
method canHydrateTextInstance
canHydrateTextInstance: ( instance: HydratableInstance, text: string) => null | TextInstance;
method clearContainer
clearContainer: (container: Container) => void;
This method should mutate the
container
root node and remove all children from it.
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, updatePayload: UpdatePayload, type: Type, oldProps: Props, newProps: Props, internalInstanceHandle: OpaqueHandle, keepChildren: boolean, recyclableInstance: null | Instance) => Instance;
method commitHydratedContainer
commitHydratedContainer: (container: Container) => 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
fromfinalizeInitialChildren
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 mirrorremoveChild
one to one becauseremoveChild
is only called for the top-level removed node. This is why ideallycommitMount
should not mutate any nodes other than theinstance
itself. For example, if it registers some events on some node above, it will be your responsibility to traverse the tree inremoveChild
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
fromfinalizeInitialChildren
, 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 tonextText
.Here,
textInstance
is a node created bycreateTextInstance
.
method commitUpdate
commitUpdate: ( instance: Instance, updatePayload: UpdatePayload, type: Type, prevProps: Props, nextProps: Props, internalHandle: OpaqueHandle) => void;
This method should mutate the
instance
according to the set of changes inupdatePayload
. Here,updatePayload
is the object that you've returned fromprepareUpdate
and has an arbitrary structure that makes sense for your renderer. For example, the DOM renderer returns an update payload like[prop1, value1, prop2, value2, ...]
fromprepareUpdate
, and that structure gets passed intocommitUpdate
. Ideally, all the diffing and calculation should happen insideprepareUpdate
so thatcommitUpdate
can be fast and straightforward.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 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 fromprops
.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 correctdocument
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, seegetChildHostContext
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 detachDeletedInstance
detachDeletedInstance: (node: Instance) => void;
method didNotFindHydratableContainerInstance
didNotFindHydratableContainerInstance: ( parentContainer: Container, type: Type, props: Props) => void;
method didNotFindHydratableContainerSuspenseInstance
didNotFindHydratableContainerSuspenseInstance: ( parentContainer: Container) => void;
method didNotFindHydratableContainerTextInstance
didNotFindHydratableContainerTextInstance: ( parentContainer: Container, text: string) => void;
method didNotFindHydratableInstance
didNotFindHydratableInstance: ( parentType: Type, parentProps: Props, parentInstance: Instance, type: Type, props: Props) => void;
method didNotFindHydratableSuspenseInstance
didNotFindHydratableSuspenseInstance: ( parentType: Type, parentProps: Props, parentInstance: Instance) => void;
method didNotFindHydratableTextInstance
didNotFindHydratableTextInstance: ( parentType: Type, parentProps: Props, parentInstance: Instance, text: string) => void;
method didNotHydrateContainerInstance
didNotHydrateContainerInstance: ( parentContainer: Container, instance: HydratableInstance) => void;
method didNotHydrateInstance
didNotHydrateInstance: ( parentType: Type, parentProps: Props, parentInstance: Instance, instance: HydratableInstance) => void;
method didNotMatchHydratedContainerTextInstance
didNotMatchHydratedContainerTextInstance: ( parentContainer: Container, textInstance: TextInstance, text: string) => void;
method didNotMatchHydratedTextInstance
didNotMatchHydratedTextInstance: ( parentType: Type, parentProps: Props, parentInstance: Instance, textInstance: TextInstance, text: string) => void;
method errorHydratingContainer
errorHydratingContainer: (parentContainer: Container) => void;
method finalizeContainerChildren
finalizeContainerChildren: (container: Container, newChildren: ChildSet) => void;
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 withcreateInstance
, by the timefinalizeInitialChildren
is called, all the initial children have already been added to theinstance
, 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 acommitMount
call later. See its documentation below.If you don't want to do anything here, you should return
false
.
method getChildHostContext
getChildHostContext: ( parentHostContext: HostContext, type: Type, rootContainer: Container) => HostContext;
Host context lets you track some information about where you are in the tree so that it's available inside
createInstance
as thehostContext
parameter. For example, the DOM renderer uses it to track whether it's inside an HTML or an SVG tree, becausecreateInstance
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 returnparentHostContext
. 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 getCurrentEventPriority
getCurrentEventPriority: () => Lane;
To implement this method, you'll need some constants available on the special
react-reconciler/constants
entry point:import {DiscreteEventPriority,ContinuousEventPriority,DefaultEventPriority,} from 'react-reconciler/constants';const HostConfig = {// ...getCurrentEventPriority() {return DefaultEventPriority;},// ...}const MyRenderer = Reconciler(HostConfig);The constant you return depends on which event, if any, is being handled right now. (In the browser, you can check this using
window.event && window.event.type
).- **Discrete events**: If the active event is directly caused by the user (such as mouse and keyboard events) and each event in a sequence is intentional (e.g. click), return DiscreteEventPriority. This tells React that they should interrupt any background work and cannot be batched across time.
- **Continuous events**: If the active event is directly caused by the user but the user can't distinguish between individual events in a sequence (e.g. mouseover), return ContinuousEventPriority. This tells React they should interrupt any background work but can be batched across time.
- **Other events / No active event**: In all other cases, return DefaultEventPriority. This tells React that this event is considered background work, and interactive events will be prioritized over it.
You can consult the
getCurrentEventPriority()
implementation inReactDOMHostConfig.js
for a reference implementation.
method getFirstHydratableChild
getFirstHydratableChild: ( parentInstance: Container | Instance) => null | HydratableInstance;
method getInstanceFromNode
getInstanceFromNode: (node: any) => Fiber | null | undefined;
method getInstanceFromScope
getInstanceFromScope: (scopeInstance: any) => null | Instance;
method getNextHydratableInstanceAfterSuspenseInstance
getNextHydratableInstanceAfterSuspenseInstance: ( suspenseInstance: SuspenseInstance) => null | HydratableInstance;
method getNextHydratableSibling
getNextHydratableSibling: ( instance: HydratableInstance) => null | HydratableInstance;
method getParentSuspenseInstance
getParentSuspenseInstance: (targetInstance: any) => null | SuspenseInstance;
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 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 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 bycreateTextInstance
.
method hydrateInstance
hydrateInstance: ( instance: Instance, type: Type, props: Props, rootContainerInstance: Container, hostContext: HostContext, internalInstanceHandle: any) => null | any[];
method hydrateSuspenseInstance
hydrateSuspenseInstance: ( suspenseInstance: SuspenseInstance, internalInstanceHandle: any) => void;
method hydrateTextInstance
hydrateTextInstance: ( textInstance: TextInstance, text: string, internalInstanceHandle: any) => boolean;
method insertBefore
insertBefore: ( parentInstance: Instance, child: Instance | TextInstance, beforeChild: Instance | TextInstance | SuspenseInstance) => void;
This method should mutate the
parentInstance
and place thechild
beforebeforeChild
in the list of its children. For example, in the DOM this would translate to aparentInstance.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 isSuspenseInstanceFallback
isSuspenseInstanceFallback: (instance: SuspenseInstance) => boolean;
method isSuspenseInstancePending
isSuspenseInstancePending: (instance: SuspenseInstance) => 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 prepareUpdate
prepareUpdate: ( instance: Instance, type: Type, oldProps: Props, newProps: Props, rootContainer: Container, hostContext: HostContext) => UpdatePayload | null;
React calls this method so that you can compare the previous and the next props, and decide whether you need to update the underlying instance or not. If you don't need to update it, return
null
. If you need to update it, you can return an arbitrary object representing the changes that need to happen. Then incommitUpdate
you would need to apply those changes to the instance.This method happens **in the render phase**. It should only *calculate* the update — but not apply it! For example, the DOM renderer returns an array that looks like
[prop1, value1, prop2, value2, ...]
for all props that have actually changed. And only incommitUpdate
it applies those changes. You should calculate as much as you can inprepareUpdate
so thatcommitUpdate
can be very fast and straightforward.See the meaning of
rootContainer
andhostContext
in thecreateInstance
documentation.
method registerSuspenseInstanceRetry
registerSuspenseInstanceRetry: ( instance: SuspenseInstance, callback: () => void) => void;
method removeChild
removeChild: ( parentInstance: Instance, child: Instance | TextInstance | SuspenseInstance) => void;
This method should mutate the
parentInstance
to remove thechild
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 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 resetTextContent
resetTextContent: (instance: Instance) => void;
If you returned
true
fromshouldSetTextContent
for the previous props, but returnedfalse
fromshouldSetTextContent
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 setnode.textContent = ''
.If you never return
true
fromshouldSetTextContent
, you can leave it empty.
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 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 duringcreateInstance
. This is a performance optimization. For example, the DOM renderer returnstrue
only iftype
is a known text-only parent (like'textarea'
) or ifprops.children
has a'string'
type. If you returntrue
, you will need to implementresetTextContent
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 unhideInstance
unhideInstance: (instance: Instance, props: Props) => void;
This method should make the
instance
visible, undoing whathideInstance
did.
method unhideTextInstance
unhideTextInstance: (textInstance: TextInstance, text: string) => void;
Same as
unhideInstance
, but for nodes created bycreateTextInstance
.
interface ReactConsumer
interface ReactConsumer<T> {}
interface ReactContext
interface ReactContext<T> {}
property $$typeof
$$typeof: symbol | number;
property Consumer
Consumer: ReactContext<T>;
property displayName
displayName?: string;
property Provider
Provider: ReactProviderType<T>;
interface ReactPortal
interface ReactPortal {}
property $$typeof
$$typeof: symbol | number;
property children
children: ReactNode;
property containerInfo
containerInfo: any;
property implementation
implementation: any;
property key
key: null | string;
interface ReactProvider
interface ReactProvider<T> {}
interface ReactProviderType
interface ReactProviderType<T> {}
property $$typeof
$$typeof: symbol | number;
interface Reconciler
interface Reconciler< Container, Instance, TextInstance, SuspenseInstance, PublicInstance> {}
method attemptContinuousHydration
attemptContinuousHydration: (fiber: Fiber) => void;
method attemptDiscreteHydration
attemptDiscreteHydration: (fiber: Fiber) => void;
method attemptHydrationAtCurrentPriority
attemptHydrationAtCurrentPriority: (fiber: Fiber) => void;
method attemptSynchronousHydration
attemptSynchronousHydration: (fiber: Fiber) => void;
method batchedUpdates
batchedUpdates: <A, R>(fn: (a: A) => R, a: A) => R;
method createComponentSelector
createComponentSelector: ( component: React$AbstractComponent<never, unknown>) => ComponentSelector;
method createContainer
createContainer: ( containerInfo: Container, tag: RootTag, hydrationCallbacks: null | SuspenseHydrationCallbacks<SuspenseInstance>, isStrictMode: boolean, concurrentUpdatesByDefaultOverride: null | boolean, identifierPrefix: string, onRecoverableError: (error: Error) => void, transitionCallbacks: null | TransitionTracingCallbacks) => OpaqueRoot;
method createHasPseudoClassSelector
createHasPseudoClassSelector: (selectors: Selector[]) => HasPseudoClassSelector;
method createHydrationContainer
createHydrationContainer: ( initialChildren: ReactNode, callback: (() => void) | null | undefined, containerInfo: Container, tag: RootTag, hydrationCallbacks: null | SuspenseHydrationCallbacks<SuspenseInstance>, isStrictMode: boolean, concurrentUpdatesByDefaultOverride: null | boolean, identifierPrefix: string, onRecoverableError: (error: Error) => void, transitionCallbacks: null | TransitionTracingCallbacks) => OpaqueRoot;
method createPortal
createPortal: ( children: ReactNode, containerInfo: any, implementation: any, key?: string | null) => ReactPortal;
method createRoleSelector
createRoleSelector: (role: string) => RoleSelector;
method createTestNameSelector
createTestNameSelector: (id: string) => TestNameSelector;
method createTextSelector
createTextSelector: (text: string) => TextSelector;
method deferredUpdates
deferredUpdates: <A>(fn: () => A) => A;
method discreteUpdates
discreteUpdates: <A, B, C, D, R>( fn: (arg0: A, arg1: B, arg2: C, arg3: D) => R, a: A, b: B, c: C, d: D) => R;
method findAllNodes
findAllNodes: (hostRoot: Instance, selectors: Selector[]) => Instance[];
method findBoundingRects
findBoundingRects: (hostRoot: Instance, selectors: Selector[]) => BoundingRect[];
method findHostInstance
findHostInstance: (component: any) => PublicInstance | null;
method findHostInstanceWithNoPortals
findHostInstanceWithNoPortals: (fiber: Fiber) => PublicInstance | null;
method findHostInstanceWithWarning
findHostInstanceWithWarning: ( component: any, methodName: string) => PublicInstance | null;
method flushControlled
flushControlled: (fn: () => any) => void;
method flushPassiveEffects
flushPassiveEffects: () => boolean;
method flushSync
flushSync: { (): void; <R>(fn: () => R): R };
method focusWithin
focusWithin: (hostRoot: Instance, selectors: Selector[]) => boolean;
method getCurrentUpdatePriority
getCurrentUpdatePriority: () => LanePriority;
method getFindAllNodesFailureDescription
getFindAllNodesFailureDescription: ( hostRoot: Instance, selectors: Selector[]) => string | null;
method getPublicRootInstance
getPublicRootInstance: ( container: OpaqueRoot) => Component<any, any> | PublicInstance | null;
method injectIntoDevTools
injectIntoDevTools: ( devToolsConfig: DevToolsConfig<Instance, TextInstance, any>) => boolean;
method isAlreadyRendering
isAlreadyRendering: () => boolean;
method observeVisibleRects
observeVisibleRects: ( hostRoot: Instance, selectors: Selector[], callback: ( intersections: Array<{ ratio: number; rect: BoundingRect }> ) => void, options?: IntersectionObserverOptions) => { disconnect: () => void };
method registerMutableSourceForHydration
registerMutableSourceForHydration: ( root: FiberRoot, mutableSource: MutableSource) => void;
method runWithPriority
runWithPriority: <T>(priority: LanePriority, fn: () => T) => T;
method shouldError
shouldError: (fiber: Fiber) => boolean | undefined;
method shouldSuspend
shouldSuspend: (fiber: Fiber) => boolean;
method updateContainer
updateContainer: ( element: ReactNode, container: OpaqueRoot, parentComponent?: Component<any, any> | null, callback?: (() => void) | null) => Lane;
interface RoleSelector
interface RoleSelector {}
interface Source
interface Source {}
property fileName
fileName: string;
property lineNumber
lineNumber: number;
interface SuspenseHydrationCallbacks
interface SuspenseHydrationCallbacks<SuspenseInstance> {}
property onDeleted
onDeleted?: (suspenseInstance: SuspenseInstance) => void;
property onHydrated
onHydrated?: (suspenseInstance: SuspenseInstance) => void;
interface TestNameSelector
interface TestNameSelector {}
interface TextSelector
interface TextSelector {}
interface Thenable
interface Thenable<T> {}
method then
then: (resolve: () => T, reject?: () => T) => T;
interface TransitionTracingCallbacks
interface TransitionTracingCallbacks {}
property onMarkerComplete
onMarkerComplete?: ( transitionName: string, marker: string, startTime: number, endTime: number) => void;
property onMarkerIncomplete
onMarkerIncomplete?: ( transitionName: string, marker: string, startTime: number, deletions: Array<{ type: string; name?: string; newName?: string; endTime: number; }>) => void;
property onMarkerProgress
onMarkerProgress?: ( transitionName: string, marker: string, startTime: number, currentTime: number, pending: Array<{ name: null | string }>) => void;
property onTransitionComplete
onTransitionComplete?: ( transitionName: string, startTime: number, endTime: number) => void;
property onTransitionIncomplete
onTransitionIncomplete?: ( transitionName: string, startTime: number, deletions: Array<{ type: string; name?: string; newName?: string; endTime: number; }>) => void;
property onTransitionProgress
onTransitionProgress?: ( transitionName: string, startTime: number, currentTime: number, pending: Array<{ name: null | string }>) => void;
property onTransitionStart
onTransitionStart?: (transitionName: string, startTime: number) => void;
Type Aliases
type BundleType
type BundleType = 0 | 1;
type FiberRoot
type FiberRoot = any;
type Flags
type Flags = number;
type HookType
type HookType = | 'useState' | 'useReducer' | 'useContext' | 'useRef' | 'useEffect' | 'useLayoutEffect' | 'useCallback' | 'useMemo' | 'useImperativeHandle' | 'useDebugValue' | 'useDeferredValue' | 'useTransition' | 'useMutableSource' | 'useOpaqueIdentifier' | 'useCacheRefresh';
type IntersectionObserverOptions
type IntersectionObserverOptions = any;
type Lane
type Lane = number;
type LanePriority
type LanePriority = | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17;
type Lanes
type Lanes = number;
type MutableSource
type MutableSource = any;
type OpaqueHandle
type OpaqueHandle = any;
type OpaqueRoot
type OpaqueRoot = any;
type React$AbstractComponent
type React$AbstractComponent<Config, Instance = any> = any;
type RootTag
type RootTag = 0 | 1 | 2;
type Selector
type Selector = | ComponentSelector | HasPseudoClassSelector | RoleSelector | TextSelector | TestNameSelector;
type TypeOfMode
type TypeOfMode = number;
type WorkTag
type WorkTag = | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24;
Package Files (1)
Dependencies (1)
Dev Dependencies (0)
No dev dependencies.
Peer Dependencies (0)
No peer dependencies.
Badge
To add a badge like this oneto your package's README, use the codes available below.
You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/@types/react-reconciler
.
- Markdown[](https://www.jsdocs.io/package/@types/react-reconciler)
- HTML<a href="https://www.jsdocs.io/package/@types/react-reconciler"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>
- Updated .
Package analyzed in 2840 ms. - Missing or incorrect documentation? Open an issue for this package.