Accepts a context object (the value returned from React.createContext) and returns the current
context value, as given by the nearest context provider for the given context.
@version — 16.8.0
@see — ://react.dev/reference/react/useContext
Returns a stateful value, and a function to update it.
@version — 16.8.0
@see — ://react.dev/reference/react/useState
Returns a stateful value, and a function to update it.
@version — 16.8.0
@see — ://react.dev/reference/react/useState
An alternative to useState.
useReducer is usually preferable to useState when you have complex state logic that involves
multiple sub-values. It also lets you optimize performance for components that trigger deep
updates because you can pass dispatch down instead of callbacks.
@version — 16.8.0
@see — ://react.dev/reference/react/useReducer
An alternative to useState.
useReducer is usually preferable to useState when you have complex state logic that involves
multiple sub-values. It also lets you optimize performance for components that trigger deep
updates because you can pass dispatch down instead of callbacks.
@version — 16.8.0
@see — ://react.dev/reference/react/useReducer
An alternative to useState.
useReducer is usually preferable to useState when you have complex state logic that involves
multiple sub-values. It also lets you optimize performance for components that trigger deep
updates because you can pass dispatch down instead of callbacks.
@version — 16.8.0
@see — ://react.dev/reference/react/useReducer
An alternative to useState.
useReducer is usually preferable to useState when you have complex state logic that involves
multiple sub-values. It also lets you optimize performance for components that trigger deep
updates because you can pass dispatch down instead of callbacks.
@version — 16.8.0
@see — ://react.dev/reference/react/useReducer
An alternative to useState.
useReducer is usually preferable to useState when you have complex state logic that involves
multiple sub-values. It also lets you optimize performance for components that trigger deep
updates because you can pass dispatch down instead of callbacks.
@version — 16.8.0
@see — ://react.dev/reference/react/useReducer
useRef returns a mutable ref object whose .current property is initialized to the passed argument
(initialValue). The returned object will persist for the full lifetime of the component.
Note that useRef() is useful for more than the ref attribute. It’s handy for keeping any mutable
value around similar to how you’d use instance fields in classes.
@version — 16.8.0
@see — ://react.dev/reference/react/useRef
useRef returns a mutable ref object whose .current property is initialized to the passed argument
(initialValue). The returned object will persist for the full lifetime of the component.
Note that useRef() is useful for more than the ref attribute. It’s handy for keeping any mutable
value around similar to how you’d use instance fields in classes.
Usage note: if you need the result of useRef to be directly mutable, include | null in the type
of the generic argument.
@version — 16.8.0
@see — ://react.dev/reference/react/useRef
useRef returns a mutable ref object whose .current property is initialized to the passed argument
(initialValue). The returned object will persist for the full lifetime of the component.
Note that useRef() is useful for more than the ref attribute. It’s handy for keeping any mutable
value around similar to how you’d use instance fields in classes.
@version — 16.8.0
@see — ://react.dev/reference/react/useRef
The signature is identical to useEffect, but it fires synchronously after all DOM mutations.
Use this to read layout from the DOM and synchronously re-render. Updates scheduled inside
useLayoutEffect will be flushed synchronously, before the browser has a chance to paint.
Prefer the standard useEffect when possible to avoid blocking visual updates.
If you’re migrating code from a class component, useLayoutEffect fires in the same phase as
componentDidMount and componentDidUpdate.
@version — 16.8.0
@see — ://react.dev/reference/react/useLayoutEffect
Accepts a function that contains imperative, possibly effectful code.
@param — Imperative function that can return a cleanup function
@param — If present, effect will only activate if the values in the list change.
@version — 16.8.0
@see — ://react.dev/reference/react/useEffect
useImperativeHandle customizes the instance value that is exposed to parent components when using
ref. As always, imperative code using refs should be avoided in most cases.
useImperativeHandle should be used with React.forwardRef.
@version — 16.8.0
@see — ://react.dev/reference/react/useImperativeHandle
useCallback will return a memoized version of the callback that only changes if one of the inputs
has changed.
@version — 16.8.0
@see — ://react.dev/reference/react/useCallback
useMemo will only recompute the memoized value when one of the deps has changed.
@version — 16.8.0
@see — ://react.dev/reference/react/useMemo
useDebugValue can be used to display a label for custom hooks in React DevTools.
NOTE: We don’t recommend adding debug values to every custom hook. It’s most valuable for custom hooks that are part of shared libraries.
@version — 16.8.0
@see — ://react.dev/reference/react/useDebugValue
Returns a deferred version of the value that may “lag behind” it.
This is commonly used to keep the interface responsive when you have something that renders immediately based on user input and something that needs to wait for a data fetch.
A good example of this is a text input.
@param — The value that is going to be deferred
@see — ://react.dev/reference/react/useDeferredValue
Allows components to avoid undesirable loading states by waiting for content to load before transitioning to the next screen. It also allows components to defer slower, data fetching updates until subsequent renders so that more crucial updates can be rendered immediately.
The useTransition hook returns two values in an array.
The first is a boolean, React’s way of informing us whether we’re waiting for the transition to finish. The second is a function that takes a callback. We can use it to tell React which state we want to defer.
If some state update causes a component to suspend, that state update should be wrapped in a transition.
@see — ://react.dev/reference/react/useTransition
Similar to useTransition but allows uses where hooks are not available.
@param — A synchronous function which causes state updates that can be deferred.
@param — Imperative function that can return a cleanup function
@param — If present, effect will only activate if the values in the list change.
@see — ://github.com/facebook/react/pull/21913
@param —
@param —
@see — ://github.com/reactwg/react-18/discussions/86
Gets the instance type for a React element. The instance will be different for various component types:
class Foo extends React.Component<{}> {}
and used React.ElementRef<typeof Foo> then the type would be the instance of Foo.React.ElementRef<typeof Bar>
(when Bar is function Bar() {}) will give you the undefined type.div will give you their DOM instance. For React.ElementRef<'div'> that would be
HTMLDivElement. For React.ElementRef<'input'> that would be HTMLInputElement.ref will give you the ElementRef of the forwarded
to component.C must be the type of a React component so you need to use typeof as in React.ElementRef<typeof MyComponent>.
@todo — In Flow, this works a little different with forwarded refs and the AbstractComponent that
React.forwardRef() returns.
@internal — You shouldn't need to use this type since you never see these attributes inside your component or have to validate them.
export interface Attributes { }Allows getting a ref to the component instance.
Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref).
@see — ://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
Allows getting a ref to the component instance.
Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref).
@see — ://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
@deprecated — Please use FunctionComponentFactory
@deprecated — - This type is not relevant when using React. Inline the type instead to make the intent clear.
export type ReactText = string | number@deprecated — - This type is not relevant when using React. Inline the type instead to make the intent clear.
export type ReactChild = ReactElement | string | number@deprecated — Use either ReactNode[] if you need an array or Iterable<ReactNode> if its passed to a host component.
For internal usage only. Different release channels declare additional types of ReactNode this particular release channel accepts. App or library types should never augment this interface.
export interface DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_REACT_NODES {}://react.dev/reference/react/Profiler#onrender-callback Profiler API
export type ProfilerOnRenderCallback = (id: string, phase: "mount" | "update" | "nested-update", actualDuration: number, baseDuration: number, startTime: number, commitTime: number, interactions: Set<SchedulerInteraction>) => void@deprecated —
@see — ://legacy.reactjs.org/docs/legacy-context.html
If set, this.context will be set at runtime to the current value of the given Context.
Usage:
type MyContext = numberconst Ctx = React.createContext<MyContext>(0)class Foo extends React.Component {static contextType = Ctxcontext!: React.ContextType<typeof Ctx>render () {return <>My context's value: {this.context}</>;}}
@see — ://react.dev/reference/react/Component#static-contexttype
If using the new style context, re-declare this in your class to be the
React.ContextType of your static contextType.
Should be used with type annotation or static contextType.
static contextType = MyContext// For TS pre-3.7:context!: React.ContextType<typeof MyContext>// For TS 3.7 and above:declare context: React.ContextType<typeof MyContext>
@see — ://react.dev/reference/react/Component#context
@deprecated — https://legacy.reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs
refs: { };@deprecated — - Equivalent with React.FunctionComponent.
defaultProps are not supported on render functions
defaultProps?: never | undefined;propTypes are not supported on render functions
propTypes?: never | undefined;We use an intersection type to infer multiple type parameters from a single argument, which is useful for many top-level API defs. See https://github.com/Microsoft/TypeScript/issues/7234 for more info.
export type ClassType<P, T extends Component<P, ComponentState>, C extends ComponentClass<P>> = C & (new (props: P, context?: any) => T)Called immediately after a component is mounted. Setting state here will trigger re-rendering.
componentDidMount(): void;Called to determine whether the change in props and state should trigger a re-render.
Component always returns true.
PureComponent implements a shallow comparison on props and state and returns true if any
props or states have changed.
If false is returned, Component#render, componentWillUpdate
and componentDidUpdate will not be called.
Called immediately before a component is destroyed. Perform any necessary cleanup in this method, such as
cancelled network requests, or cleaning up any DOM elements created in componentDidMount.
Catches exceptions generated in descendant components. Unhandled exceptions will cause the entire component tree to unmount.
componentDidCatch(error: Error, errorInfo: ErrorInfo): void;Runs before React applies the result of render to the document, and
returns an object to be given to componentDidUpdate. Useful for saving
things such as scroll position before render causes changes to it.
Note: the presence of getSnapshotBeforeUpdate prevents any of the deprecated lifecycle events from running.
Called immediately after updating occurs. Not called for the initial render.
The snapshot is only present if getSnapshotBeforeUpdate is present and returns non-null.
Called immediately before mounting occurs, and before Component#render.
Avoid introducing any side-effects or subscriptions in this method.
Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps prevents this from being invoked.
@deprecated — 16.3, use componentDidMount or the constructor instead; will stop working in React 17
@see — ://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state
@see — ://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path
Called immediately before mounting occurs, and before Component#render.
Avoid introducing any side-effects or subscriptions in this method.
This method will not stop working in React 17.
Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps prevents this from being invoked.
@deprecated — 16.3, use componentDidMount or the constructor instead
@see — ://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state
@see — ://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path
Called when the component may be receiving new props. React may call this even if props have not changed, so be sure to compare new and existing props if you only want to handle changes.
Calling Component#setState generally does not trigger this method.
Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps prevents this from being invoked.
@deprecated — 16.3, use static getDerivedStateFromProps instead; will stop working in React 17
@see — ://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props
@see — ://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path
Called when the component may be receiving new props. React may call this even if props have not changed, so be sure to compare new and existing props if you only want to handle changes.
Calling Component#setState generally does not trigger this method.
This method will not stop working in React 17.
Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps prevents this from being invoked.
@deprecated — 16.3, use static getDerivedStateFromProps instead
@see — ://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props
@see — ://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path
Called immediately before rendering when new props or state is received. Not called for the initial render.
Note: You cannot call Component#setState here.
Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps prevents this from being invoked.
@deprecated — 16.3, use getSnapshotBeforeUpdate instead; will stop working in React 17
@see — ://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update
@see — ://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path
Called immediately before rendering when new props or state is received. Not called for the initial render.
Note: You cannot call Component#setState here.
This method will not stop working in React 17.
Note: the presence of getSnapshotBeforeUpdate or getDerivedStateFromProps prevents this from being invoked.
@deprecated — 16.3, use getSnapshotBeforeUpdate instead
@see — ://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update
@see — ://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path
Ensures that the props do not include ref at all
export type PropsWithoutRef<P> = P extends any ? ("ref" extends keyof P ? Omit<P, "ref"> : P) : PEnsures that the props do not include string ref, which cannot be forwarded
export type PropsWithRef<P> = "ref" extends keyof P ? P extends {NOTE: prefer ComponentPropsWithRef, if the ref is forwarded, or ComponentPropsWithoutRef when refs are not supported.
export type ComponentProps<T extends keyof IntrinsicElements | JSXElementConstructor<any>> = T extends JSXElementConstructor<infer P> ? P : T extends keyof IntrinsicElements ? IntrinsicElements[T] : {}State updates caused inside the callback are allowed to be deferred.
If some state update causes a component to suspend, that state update should be wrapped in a transition.
@param — A synchronous function which causes state updates that can be deferred.
currentTarget - a reference to the element on which the event listener is registered.
target - a reference to the element from which the event was originally dispatched.
This might be a child element to the element on which the event listener is registered.
If you thought this should be EventTarget & T, see https://github.com/DefinitelyTyped/DefinitelyTyped/issues/11508#issuecomment-256045682
@deprecated —
charCode: number;See DOM Level 3 Events spec. for a list of valid (case-sensitive) arguments to this method.
getModifierState(key: ModifierKey): boolean;@deprecated —
keyCode: number;@deprecated —
which: number;See DOM Level 3 Events spec. for a list of valid (case-sensitive) arguments to this method.
getModifierState(key: ModifierKey): boolean;See DOM Level 3 Events spec. for a list of valid (case-sensitive) arguments to this method.
getModifierState(key: ModifierKey): boolean;Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.
"aria-activedescendant"?: string | undefined;Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.
"aria-atomic"?: Booleanish | undefined;Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be presented if they are made.
"aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined;Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user.
Defines a string value that labels the current element, which is intended to be converted into Braille.
@see —
Defines a human-readable, author-localized abbreviated description for the role of an element, which is intended to be converted into Braille.
@see —
Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.
@see —
@see —
Defines the total number of columns in a table, grid, or treegrid.
@see —
Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.
@see —
@see —
Defines a human readable text alternative of aria-colindex.
@see —
Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.
@see —
@see —
Identifies the element (or elements) whose contents or presence are controlled by the current element.
@see —
Indicates the element that represents the current item within a container or set of related elements.
"aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined;Identifies the element (or elements) that describes the object.
@see —
Defines a string value that describes or annotates the current element.
@see — aria-describedby.
Identifies the element that provides a detailed, extended description for the object.
@see —
Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.
@see —
@see —
Indicates what functions can be performed when a dragged object is released on the drop target.
@deprecated — in ARIA 1.1
Identifies the element that provides an error message for the object.
@see —
@see —
Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.
"aria-expanded"?: Booleanish | undefined;Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion, allows assistive technology to override the general default of reading in document source order.
"aria-flowto"?: string | undefined;Indicates an element's "grabbed" state in a drag-and-drop operation.
@deprecated — in ARIA 1.1
Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.
"aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined;Indicates whether the element is exposed to an accessibility API.
@see —
Indicates the entered value does not conform to the format expected by the application.
@see —
Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.
"aria-keyshortcuts"?: string | undefined;Defines a string value that labels the current element.
@see —
Identifies the element (or elements) that labels the current element.
@see —
Defines the hierarchical level of an element within a structure.
"aria-level"?: number | undefined;Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.
"aria-live"?: "off" | "assertive" | "polite" | undefined;Indicates whether a text box accepts multiple lines of input or only a single line.
"aria-multiline"?: Booleanish | undefined;Indicates that the user may select more than one item from the current selectable descendants.
"aria-multiselectable"?: Booleanish | undefined;Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.
"aria-orientation"?: "horizontal" | "vertical" | undefined;Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship between DOM elements where the DOM hierarchy cannot be used to represent the relationship.
@see —
Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. A hint could be a sample value or a brief description of the expected format.
"aria-placeholder"?: string | undefined;Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.
@see —
Indicates the current "pressed" state of toggle buttons.
@see —
@see —
Indicates that the element is not editable, but is otherwise operable.
@see —
Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.
@see —
Indicates that user input is required on the element before a form may be submitted.
"aria-required"?: Booleanish | undefined;Defines a human-readable, author-localized description for the role of an element.
"aria-roledescription"?: string | undefined;Defines the total number of rows in a table, grid, or treegrid.
@see —
Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.
@see —
@see —
Defines a human readable text alternative of aria-rowindex.
@see —
Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.
@see —
@see —
Indicates the current "selected" state of various widgets.
@see —
@see —
Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.
@see —
Indicates if items in a table or grid are sorted in ascending or descending order.
"aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;Defines the maximum allowed value for a range widget.
"aria-valuemax"?: number | undefined;Defines the minimum allowed value for a range widget.
"aria-valuemin"?: number | undefined;Defines the current value for a range widget.
@see —
Defines the human readable text alternative of aria-valuenow for a range widget.
"aria-valuetext"?: string | undefined;Hints at the type of data that might be entered by the user while editing the element or its contents
@see — ://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute
Specify that a standard HTML element should behave like a defined custom built-in element
@see — ://html.spec.whatwg.org/multipage/custom-elements.html#attr-is
For internal usage only. Different release channels declare additional types of ReactNode this particular release channel accepts. App or library types should never augment this interface.
export interface DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS {}@deprecated —
frameBorder?: number | string | undefined;@deprecated —
marginHeight?: number | undefined;@deprecated —
marginWidth?: number | undefined;@deprecated —
scrolling?: string | undefined;@deprecated —
charSet?: string | undefined;@deprecated — - Use typeof React.Children instead.
Captures which component contained the exception, and its ancestors.
componentStack?: string | null;