@types/react
- Version 18.0.28
- Published
- 178 kB
- 3 dependencies
- MIT license
Install
npm i @types/react
yarn add @types/react
pnpm add @types/react
Overview
TypeScript definitions for React
Index
Variables
Functions
- cache()
- cloneElement()
- createContext()
- createElement()
- createFactory()
- createRef()
- createServerContext()
- experimental_useEvent()
- forwardRef()
- isValidElement()
- lazy()
- memo()
- startTransition()
- unstable_useCacheRefresh()
- use()
- useCallback()
- useContext()
- useDebugValue()
- useDeferredValue()
- useEffect()
- useId()
- useImperativeHandle()
- useInsertionEffect()
- useLayoutEffect()
- useMemo()
- useReducer()
- useRef()
- useState()
- useSyncExternalStore()
- useTransition()
Classes
Interfaces
AllHTMLAttributes
- accept
- acceptCharset
- action
- allowFullScreen
- allowTransparency
- alt
- as
- async
- autoComplete
- autoFocus
- autoPlay
- capture
- cellPadding
- cellSpacing
- challenge
- charSet
- checked
- cite
- classID
- cols
- colSpan
- content
- controls
- coords
- crossOrigin
- data
- dateTime
- default
- defer
- disabled
- download
- encType
- form
- formAction
- formEncType
- formMethod
- formNoValidate
- formTarget
- frameBorder
- headers
- height
- high
- href
- hrefLang
- htmlFor
- httpEquiv
- integrity
- keyParams
- keyType
- kind
- label
- list
- loop
- low
- manifest
- marginHeight
- marginWidth
- max
- maxLength
- media
- mediaGroup
- method
- min
- minLength
- multiple
- muted
- name
- noValidate
- open
- optimum
- pattern
- placeholder
- playsInline
- poster
- preload
- readOnly
- rel
- required
- reversed
- rows
- rowSpan
- sandbox
- scope
- scoped
- scrolling
- seamless
- selected
- shape
- size
- sizes
- span
- src
- srcDoc
- srcLang
- srcSet
- start
- step
- summary
- target
- type
- useMap
- value
- width
- wmode
- wrap
AriaAttributes
- 'aria-activedescendant'
- 'aria-atomic'
- 'aria-autocomplete'
- 'aria-busy'
- 'aria-checked'
- 'aria-colcount'
- 'aria-colindex'
- 'aria-colspan'
- 'aria-controls'
- 'aria-current'
- 'aria-describedby'
- 'aria-details'
- 'aria-disabled'
- 'aria-dropeffect'
- 'aria-errormessage'
- 'aria-expanded'
- 'aria-flowto'
- 'aria-grabbed'
- 'aria-haspopup'
- 'aria-hidden'
- 'aria-invalid'
- 'aria-keyshortcuts'
- 'aria-label'
- 'aria-labelledby'
- 'aria-level'
- 'aria-live'
- 'aria-modal'
- 'aria-multiline'
- 'aria-multiselectable'
- 'aria-orientation'
- 'aria-owns'
- 'aria-placeholder'
- 'aria-posinset'
- 'aria-pressed'
- 'aria-readonly'
- 'aria-relevant'
- 'aria-required'
- 'aria-roledescription'
- 'aria-rowcount'
- 'aria-rowindex'
- 'aria-rowspan'
- 'aria-selected'
- 'aria-setsize'
- 'aria-sort'
- 'aria-valuemax'
- 'aria-valuemin'
- 'aria-valuenow'
- 'aria-valuetext'
DOMAttributes
- children
- dangerouslySetInnerHTML
- onAbort
- onAbortCapture
- onAnimationEnd
- onAnimationEndCapture
- onAnimationIteration
- onAnimationIterationCapture
- onAnimationStart
- onAnimationStartCapture
- onAuxClick
- onAuxClickCapture
- onBeforeInput
- onBeforeInputCapture
- onBlur
- onBlurCapture
- onCanPlay
- onCanPlayCapture
- onCanPlayThrough
- onCanPlayThroughCapture
- onChange
- onChangeCapture
- onClick
- onClickCapture
- onCompositionEnd
- onCompositionEndCapture
- onCompositionStart
- onCompositionStartCapture
- onCompositionUpdate
- onCompositionUpdateCapture
- onContextMenu
- onContextMenuCapture
- onCopy
- onCopyCapture
- onCut
- onCutCapture
- onDoubleClick
- onDoubleClickCapture
- onDrag
- onDragCapture
- onDragEnd
- onDragEndCapture
- onDragEnter
- onDragEnterCapture
- onDragExit
- onDragExitCapture
- onDragLeave
- onDragLeaveCapture
- onDragOver
- onDragOverCapture
- onDragStart
- onDragStartCapture
- onDrop
- onDropCapture
- onDurationChange
- onDurationChangeCapture
- onEmptied
- onEmptiedCapture
- onEncrypted
- onEncryptedCapture
- onEnded
- onEndedCapture
- onError
- onErrorCapture
- onFocus
- onFocusCapture
- onGotPointerCapture
- onGotPointerCaptureCapture
- onInput
- onInputCapture
- onInvalid
- onInvalidCapture
- onKeyDown
- onKeyDownCapture
- onKeyPress
- onKeyPressCapture
- onKeyUp
- onKeyUpCapture
- onLoad
- onLoadCapture
- onLoadedData
- onLoadedDataCapture
- onLoadedMetadata
- onLoadedMetadataCapture
- onLoadStart
- onLoadStartCapture
- onLostPointerCapture
- onLostPointerCaptureCapture
- onMouseDown
- onMouseDownCapture
- onMouseEnter
- onMouseLeave
- onMouseMove
- onMouseMoveCapture
- onMouseOut
- onMouseOutCapture
- onMouseOver
- onMouseOverCapture
- onMouseUp
- onMouseUpCapture
- onPaste
- onPasteCapture
- onPause
- onPauseCapture
- onPlay
- onPlayCapture
- onPlaying
- onPlayingCapture
- onPointerCancel
- onPointerCancelCapture
- onPointerDown
- onPointerDownCapture
- onPointerEnter
- onPointerEnterCapture
- onPointerLeave
- onPointerLeaveCapture
- onPointerMove
- onPointerMoveCapture
- onPointerOut
- onPointerOutCapture
- onPointerOver
- onPointerOverCapture
- onPointerUp
- onPointerUpCapture
- onProgress
- onProgressCapture
- onRateChange
- onRateChangeCapture
- onReset
- onResetCapture
- onResize
- onResizeCapture
- onScroll
- onScrollCapture
- onSeeked
- onSeekedCapture
- onSeeking
- onSeekingCapture
- onSelect
- onSelectCapture
- onStalled
- onStalledCapture
- onSubmit
- onSubmitCapture
- onSuspend
- onSuspendCapture
- onTimeUpdate
- onTimeUpdateCapture
- onTouchCancel
- onTouchCancelCapture
- onTouchEnd
- onTouchEndCapture
- onTouchMove
- onTouchMoveCapture
- onTouchStart
- onTouchStartCapture
- onTransitionEnd
- onTransitionEndCapture
- onVolumeChange
- onVolumeChangeCapture
- onWaiting
- onWaitingCapture
- onWheel
- onWheelCapture
HTMLAttributes
- about
- accessKey
- autoCapitalize
- autoCorrect
- autoSave
- className
- color
- contentEditable
- contextMenu
- datatype
- defaultChecked
- defaultValue
- dir
- draggable
- hidden
- id
- inlist
- inputMode
- is
- itemID
- itemProp
- itemRef
- itemScope
- itemType
- lang
- nonce
- placeholder
- prefix
- property
- radioGroup
- resource
- results
- role
- security
- slot
- spellCheck
- style
- suppressContentEditableWarning
- suppressHydrationWarning
- tabIndex
- title
- translate
- typeof
- unselectable
- vocab
ReactHTML
- "var"
- a
- abbr
- address
- area
- article
- aside
- audio
- b
- base
- bdi
- bdo
- big
- blockquote
- body
- br
- button
- canvas
- caption
- center
- cite
- code
- col
- colgroup
- data
- datalist
- dd
- del
- details
- dfn
- dialog
- div
- dl
- dt
- em
- embed
- fieldset
- figcaption
- figure
- footer
- form
- h1
- h2
- h3
- h4
- h5
- h6
- head
- header
- hgroup
- hr
- html
- i
- iframe
- img
- input
- ins
- kbd
- keygen
- label
- legend
- li
- link
- main
- map
- mark
- menu
- menuitem
- meta
- meter
- nav
- noscript
- object
- ol
- optgroup
- option
- output
- p
- param
- picture
- pre
- progress
- q
- rp
- rt
- ruby
- s
- samp
- script
- section
- select
- slot
- small
- source
- span
- strong
- style
- sub
- summary
- sup
- table
- tbody
- td
- template
- textarea
- tfoot
- th
- thead
- time
- title
- tr
- track
- u
- ul
- video
- wbr
- webview
ReactSVG
- animate
- circle
- clipPath
- defs
- desc
- ellipse
- feBlend
- feColorMatrix
- feComponentTransfer
- feComposite
- feConvolveMatrix
- feDiffuseLighting
- feDisplacementMap
- feDistantLight
- feDropShadow
- feFlood
- feFuncA
- feFuncB
- feFuncG
- feFuncR
- feGaussianBlur
- feImage
- feMerge
- feMergeNode
- feMorphology
- feOffset
- fePointLight
- feSpecularLighting
- feSpotLight
- feTile
- feTurbulence
- filter
- foreignObject
- g
- image
- line
- linearGradient
- marker
- mask
- metadata
- path
- pattern
- polygon
- polyline
- radialGradient
- rect
- stop
- svg
- switch
- symbol
- text
- textPath
- tspan
- use
- view
SVGAttributes
- accentHeight
- accumulate
- additive
- alignmentBaseline
- allowReorder
- alphabetic
- amplitude
- arabicForm
- ascent
- attributeName
- attributeType
- autoReverse
- azimuth
- baseFrequency
- baselineShift
- baseProfile
- bbox
- begin
- bias
- by
- calcMode
- capHeight
- className
- clip
- clipPath
- clipPathUnits
- clipRule
- color
- colorInterpolation
- colorInterpolationFilters
- colorProfile
- colorRendering
- contentScriptType
- contentStyleType
- crossOrigin
- cursor
- cx
- cy
- d
- decelerate
- descent
- diffuseConstant
- direction
- display
- divisor
- dominantBaseline
- dur
- dx
- dy
- edgeMode
- elevation
- enableBackground
- end
- exponent
- externalResourcesRequired
- fill
- fillOpacity
- fillRule
- filter
- filterRes
- filterUnits
- floodColor
- floodOpacity
- focusable
- fontFamily
- fontSize
- fontSizeAdjust
- fontStretch
- fontStyle
- fontVariant
- fontWeight
- format
- fr
- from
- fx
- fy
- g1
- g2
- glyphName
- glyphOrientationHorizontal
- glyphOrientationVertical
- glyphRef
- gradientTransform
- gradientUnits
- hanging
- height
- horizAdvX
- horizOriginX
- href
- id
- ideographic
- imageRendering
- in
- in2
- intercept
- k
- k1
- k2
- k3
- k4
- kernelMatrix
- kernelUnitLength
- kerning
- keyPoints
- keySplines
- keyTimes
- lang
- lengthAdjust
- letterSpacing
- lightingColor
- limitingConeAngle
- local
- markerEnd
- markerHeight
- markerMid
- markerStart
- markerUnits
- markerWidth
- mask
- maskContentUnits
- maskUnits
- mathematical
- max
- media
- method
- min
- mode
- name
- numOctaves
- offset
- opacity
- operator
- order
- orient
- orientation
- origin
- overflow
- overlinePosition
- overlineThickness
- paintOrder
- panose1
- path
- pathLength
- patternContentUnits
- patternTransform
- patternUnits
- pointerEvents
- points
- pointsAtX
- pointsAtY
- pointsAtZ
- preserveAlpha
- preserveAspectRatio
- primitiveUnits
- r
- radius
- refX
- refY
- renderingIntent
- repeatCount
- repeatDur
- requiredExtensions
- requiredFeatures
- restart
- result
- role
- rotate
- rx
- ry
- scale
- seed
- shapeRendering
- slope
- spacing
- specularConstant
- specularExponent
- speed
- spreadMethod
- startOffset
- stdDeviation
- stemh
- stemv
- stitchTiles
- stopColor
- stopOpacity
- strikethroughPosition
- strikethroughThickness
- string
- stroke
- strokeDasharray
- strokeDashoffset
- strokeLinecap
- strokeLinejoin
- strokeMiterlimit
- strokeOpacity
- strokeWidth
- style
- surfaceScale
- systemLanguage
- tabIndex
- tableValues
- target
- targetX
- targetY
- textAnchor
- textDecoration
- textLength
- textRendering
- to
- transform
- type
- u1
- u2
- underlinePosition
- underlineThickness
- unicode
- unicodeBidi
- unicodeRange
- unitsPerEm
- vAlphabetic
- values
- vectorEffect
- version
- vertAdvY
- vertOriginX
- vertOriginY
- vHanging
- vIdeographic
- viewBox
- viewTarget
- visibility
- vMathematical
- width
- widths
- wordSpacing
- writingMode
- x
- x1
- x2
- xChannelSelector
- xHeight
- xlinkActuate
- xlinkArcrole
- xlinkHref
- xlinkRole
- xlinkShow
- xlinkTitle
- xlinkType
- xmlBase
- xmlLang
- xmlns
- xmlnsXlink
- xmlSpace
- y
- y1
- y2
- yChannelSelector
- z
- zoomAndPan
Type Aliases
- AnimationEventHandler
- AriaRole
- CElement
- CFactory
- ChangeEventHandler
- ClassicElement
- ClassicFactory
- ClassType
- ClipboardEventHandler
- ComponentFactory
- ComponentProps
- ComponentPropsWithoutRef
- ComponentPropsWithRef
- ComponentRef
- ComponentState
- ComponentType
- CompositionEventHandler
- Consumer
- ContextType
- DependencyList
- DetailedHTMLProps
- Dispatch
- DispatchWithoutAction
- DOMFactory
- DragEventHandler
- EffectCallback
- ElementRef
- ElementType
- EventHandler
- Factory
- FC
- FocusEventHandler
- FormEventHandler
- ForwardedRef
- FunctionComponentFactory
- GetDerivedStateFromError
- GetDerivedStateFromProps
- HTMLAttributeAnchorTarget
- HTMLAttributeReferrerPolicy
- HTMLInputTypeAttribute
- JSXElementConstructor
- Key
- KeyboardEventHandler
- LazyExoticComponent
- LegacyRef
- MemoExoticComponent
- ModifierKey
- MouseEventHandler
- PointerEventHandler
- ProfilerOnRenderCallback
- PropsWithChildren
- PropsWithoutRef
- PropsWithRef
- Provider
- ReactChild
- ReactEventHandler
- ReactFragment
- ReactInstance
- ReactNode
- ReactText
- Reducer
- ReducerAction
- ReducerState
- ReducerStateWithoutAction
- ReducerWithoutAction
- Ref
- RefCallback
- Requireable
- ServerContextJSONValue
- SetStateAction
- SFCFactory
- SuspenseListProps
- SuspenseListRevealOrder
- SuspenseListTailMode
- Thenable
- TouchEventHandler
- TransitionEventHandler
- TransitionFunction
- UIEventHandler
- Usable
- ValidationMap
- Validator
- VFC
- WeakValidationMap
- WheelEventHandler
Namespaces
Variables
variable Children
const Children: { map<T, C>( children: C | readonly C[], fn: (child: C, index: number) => T ): C extends null ? C : Exclude<T, boolean>[]; forEach<C>( children: C | readonly C[], fn: (child: C, index: number) => void ): void; count(children: any): number; only<C>(children: C): C extends any[] ? never : C; toArray( children: ReactNode | ReactNode[] ): Array<Exclude<ReactNode, boolean | null | undefined>>;};
variable Fragment
const Fragment: ExoticComponent<{ children?: ReactNode | undefined }>;
variable Profiler
const Profiler: ExoticComponent<ProfilerProps>;
variable StrictMode
const StrictMode: ExoticComponent<{ children?: ReactNode | undefined }>;
variable Suspense
const Suspense: ExoticComponent<SuspenseProps>;
variable SuspenseList
const SuspenseList: ExoticComponent<SuspenseListProps>;
SuspenseList
helps coordinate many components that can suspend by orchestrating the order in which these components are revealed to the user.When multiple components need to fetch data, this data may arrive in an unpredictable order. However, if you wrap these items in a
SuspenseList
, React will not show an item in the list until previous items have been displayed (this behavior is adjustable).See Also
https://reactjs.org/docs/concurrent-mode-reference.html#suspenselist
https://reactjs.org/docs/concurrent-mode-patterns.html#suspenselist
variable UNDEFINED_VOID_ONLY
const UNDEFINED_VOID_ONLY: Symbol;
variable version
const version: string;
Functions
function cache
cache: <CachedFunction extends Function>(fn: CachedFunction) => CachedFunction;
function cloneElement
cloneElement: { <P extends HTMLAttributes<T>, T extends HTMLElement>( element: DetailedReactHTMLElement<P, T>, props?: P, ...children: ReactNode[] ): DetailedReactHTMLElement<P, T>; <P extends HTMLAttributes<T>, T extends HTMLElement>( element: ReactHTMLElement<T>, props?: P, ...children: ReactNode[] ): ReactHTMLElement<T>; <P extends SVGAttributes<T>, T extends SVGElement>( element: ReactSVGElement, props?: P, ...children: ReactNode[] ): ReactSVGElement; <P extends DOMAttributes<T>, T extends Element>( element: DOMElement<P, T>, props?: DOMAttributes<T> & P, ...children: ReactNode[] ): DOMElement<P, T>; <P>( element: FunctionComponentElement<P>, props?: Partial<P> & Attributes, ...children: ReactNode[] ): FunctionComponentElement<P>; <P, T extends Component<P, any, any>>( element: CElement<P, T>, props?: Partial<P> & ClassAttributes<T>, ...children: ReactNode[] ): CElement<P, T>; <P>( element: ReactElement<P, string | JSXElementConstructor<any>>, props?: Partial<P> & Attributes, ...children: ReactNode[] ): ReactElement<P, string | JSXElementConstructor<any>>;};
function createContext
createContext: <T>(defaultValue: T) => Context<T>;
function createElement
createElement: { ( type: 'input', props?: | (InputHTMLAttributes<HTMLInputElement> & ClassAttributes<HTMLInputElement>) | null, ...children: ReactNode[] ): DetailedReactHTMLElement< InputHTMLAttributes<HTMLInputElement>, HTMLInputElement >; <P extends HTMLAttributes<T>, T extends HTMLElement>( type: keyof ReactHTML, props?: ClassAttributes<T> & P, ...children: ReactNode[] ): DetailedReactHTMLElement<P, T>; <P extends SVGAttributes<T>, T extends SVGElement>( type: keyof ReactSVG, props?: ClassAttributes<T> & P, ...children: ReactNode[] ): ReactSVGElement; <P extends DOMAttributes<T>, T extends Element>( type: string, props?: ClassAttributes<T> & P, ...children: ReactNode[] ): DOMElement<P, T>; <P extends {}>( type: FunctionComponent<P>, props?: Attributes & P, ...children: ReactNode[] ): FunctionComponentElement<P>; <P extends {}>( type: ClassType<P, ClassicComponent<P, any>, ClassicComponentClass<P>>, props?: ClassAttributes<ClassicComponent<P, any>> & P, ...children: ReactNode[] ): CElement<P, ClassicComponent<P, any>>; < P extends {}, T extends Component<P, any, any>, C extends ComponentClass<P, any> >( type: ClassType<P, T, C>, props?: ClassAttributes<T> & P, ...children: ReactNode[] ): CElement<P, T>; <P extends {}>( type: string | FunctionComponent<P> | ComponentClass<P, any>, props?: Attributes & P, ...children: ReactNode[] ): ReactElement<P, string | JSXElementConstructor<any>>;};
function createFactory
createFactory: { <T extends HTMLElement>(type: keyof ReactHTML): HTMLFactory<T>; (type: keyof ReactSVG): SVGFactory; <P extends DOMAttributes<T>, T extends Element>(type: string): DOMFactory<P, T>; <P>(type: FunctionComponent<P>): FunctionComponentFactory<P>; <P>( type: ClassType<P, ClassicComponent<P, any>, ClassicComponentClass<P>> ): CFactory<P, ClassicComponent<P, any>>; <P, T extends Component<P, any, any>, C extends ComponentClass<P, any>>( type: ClassType<P, T, C> ): CFactory<P, T>; <P>(type: ComponentClass<P, any>): Factory<P>;};
function createRef
createRef: <T>() => RefObject<T>;
function createServerContext
createServerContext: <T extends ServerContextJSONValue>( globalName: string, defaultValue: T) => ServerContext<T>;
function experimental_useEvent
experimental_useEvent: <T extends Function>(event: T) => T;
function forwardRef
forwardRef: <T, P = {}>( render: ForwardRefRenderFunction<T, P>) => ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<T>>;
function isValidElement
isValidElement: <P>( object: {} | null | undefined) => object is ReactElement<P, string | JSXElementConstructor<any>>;
function lazy
lazy: <T extends ComponentType<any>>( factory: () => Promise<{ default: T }>) => LazyExoticComponent<T>;
function memo
memo: { <P extends object>( Component: FunctionComponent<P>, propsAreEqual?: (prevProps: Readonly<P>, nextProps: Readonly<P>) => boolean ): NamedExoticComponent<P>; <T extends ComponentType<any>>( Component: T, propsAreEqual?: ( prevProps: Readonly<ComponentProps<T>>, nextProps: Readonly<ComponentProps<T>> ) => boolean ): MemoExoticComponent<T>;};
function startTransition
startTransition: (scope: TransitionFunction) => void;
Similar to
useTransition
but allows uses where hooks are not available.Parameter callback
A _synchronous_ function which causes state updates that can be deferred.
function unstable_useCacheRefresh
unstable_useCacheRefresh: () => () => void;
function use
use: <T>(usable: Usable<T>) => T;
function useCallback
useCallback: <T extends Function>(callback: T, deps: DependencyList) => T;
useCallback
will return a memoized version of the callback that only changes if one of theinputs
has changed.16.8.0
See Also
https://reactjs.org/docs/hooks-reference.html#usecallback
function useContext
useContext: { <T>(context: Context<T>): T; <T extends ServerContextJSONValue>(context: ServerContext<T>): T;};
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.16.8.0
See Also
https://reactjs.org/docs/hooks-reference.html#usecontext
function useDebugValue
useDebugValue: <T>(value: T, format?: (value: T) => any) => void;
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.
16.8.0
See Also
https://reactjs.org/docs/hooks-reference.html#usedebugvalue
function useDeferredValue
useDeferredValue: <T>(value: T) => T;
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.
Parameter value
The value that is going to be deferred
See Also
https://reactjs.org/docs/concurrent-mode-reference.html#usedeferredvalue
function useEffect
useEffect: (effect: EffectCallback, deps?: DependencyList) => void;
Accepts a function that contains imperative, possibly effectful code.
Parameter effect
Imperative function that can return a cleanup function
Parameter deps
If present, effect will only activate if the values in the list change.
16.8.0
See Also
https://reactjs.org/docs/hooks-reference.html#useeffect
function useId
useId: () => string;
function useImperativeHandle
useImperativeHandle: <T, R extends T>( ref: Ref<T> | undefined, init: () => R, deps?: DependencyList) => void;
useImperativeHandle
customizes the instance value that is exposed to parent components when usingref
. As always, imperative code using refs should be avoided in most cases.useImperativeHandle
should be used withReact.forwardRef
.16.8.0
See Also
https://reactjs.org/docs/hooks-reference.html#useimperativehandle
function useInsertionEffect
useInsertionEffect: (effect: EffectCallback, deps?: DependencyList) => void;
Parameter effect
Imperative function that can return a cleanup function
Parameter deps
If present, effect will only activate if the values in the list change.
See Also
https://github.com/facebook/react/pull/21913
function useLayoutEffect
useLayoutEffect: (effect: EffectCallback, deps?: DependencyList) => void;
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 insideuseLayoutEffect
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 ascomponentDidMount
andcomponentDidUpdate
.16.8.0
See Also
https://reactjs.org/docs/hooks-reference.html#uselayouteffect
function useMemo
useMemo: <T>(factory: () => T, deps: DependencyList | undefined) => T;
useMemo
will only recompute the memoized value when one of thedeps
has changed.16.8.0
See Also
https://reactjs.org/docs/hooks-reference.html#usememo
function useReducer
useReducer: { <R extends ReducerWithoutAction<any>, I>( reducer: R, initializerArg: I, initializer: (arg: I) => ReducerStateWithoutAction<R> ): [ReducerStateWithoutAction<R>, DispatchWithoutAction]; <R extends ReducerWithoutAction<any>>( reducer: R, initializerArg: ReducerStateWithoutAction<R>, initializer?: undefined ): [ReducerStateWithoutAction<R>, DispatchWithoutAction]; <R extends Reducer<any, any>, I>( reducer: R, initializerArg: I & ReducerState<R>, initializer: (arg: I & ReducerState<R>) => ReducerState<R> ): [ReducerState<R>, Dispatch<ReducerAction<R>>]; <R extends Reducer<any, any>, I>( reducer: R, initializerArg: I, initializer: (arg: I) => ReducerState<R> ): [ReducerState<R>, Dispatch<ReducerAction<R>>]; <R extends Reducer<any, any>>( reducer: R, initialState: ReducerState<R>, initializer?: undefined ): [ReducerState<R>, Dispatch<ReducerAction<R>>];};
An alternative to
useState
.useReducer
is usually preferable touseState
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 passdispatch
down instead of callbacks.16.8.0
See Also
https://reactjs.org/docs/hooks-reference.html#usereducer
function useRef
useRef: { <T>(initialValue: T): MutableRefObject<T>; <T>(initialValue: T): RefObject<T>; <T = undefined>(): MutableRefObject<T>;};
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 theref
attribute. It’s handy for keeping any mutable value around similar to how you’d use instance fields in classes.16.8.0
See Also
https://reactjs.org/docs/hooks-reference.html#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 theref
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.16.8.0
See Also
https://reactjs.org/docs/hooks-reference.html#useref
function useState
useState: { <S>(initialState: S | (() => S)): [S, Dispatch<SetStateAction<S>>]; <S = undefined>(): [S, Dispatch<SetStateAction<S>>];};
Returns a stateful value, and a function to update it.
16.8.0
See Also
https://reactjs.org/docs/hooks-reference.html#usestate
function useSyncExternalStore
useSyncExternalStore: <Snapshot>( subscribe: (onStoreChange: () => void) => () => void, getSnapshot: () => Snapshot, getServerSnapshot?: () => Snapshot) => Snapshot;
Parameter subscribe
Parameter getSnapshot
See Also
https://github.com/reactwg/react-18/discussions/86
function useTransition
useTransition: () => [boolean, TransitionStartFunction];
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 Also
https://reactjs.org/docs/concurrent-mode-reference.html#usetransition
Classes
class Component
class Component<P, S> {}
constructor
constructor(props: P | Readonly<P>);
constructor
constructor(props: {}, context: any);
See Also
https://reactjs.org/docs/legacy-context.html
Deprecated
property context
context: {};
If using the new style context, re-declare this in your class to be the
React.ContextType
of yourstatic 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 Also
https://reactjs.org/docs/context.html
property contextType
static contextType?: Context<any>;
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 Also
https://reactjs.org/docs/context.html#classcontexttype
property props
readonly props: Readonly<P>;
property refs
refs: { [key: string]: ReactInstance };
Deprecated
https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs
property state
state: Readonly<S>;
method forceUpdate
forceUpdate: (callback?: () => void) => void;
method render
render: () => ReactNode;
method setState
setState: <K extends keyof S>( state: | S | ((prevState: Readonly<S>, props: Readonly<P>) => Pick<S, K> | S | null) | Pick<S, K>, callback?: () => void) => void;
class PureComponent
class PureComponent<P = {}, S = {}, SS = any> extends Component<P, S, SS> {}
Interfaces
interface AbstractView
interface AbstractView {}
property document
document: Document;
property styleMedia
styleMedia: StyleMedia;
interface AllHTMLAttributes
interface AllHTMLAttributes<T> extends HTMLAttributes<T> {}
property accept
accept?: string | undefined;
property acceptCharset
acceptCharset?: string | undefined;
property action
action?: string | undefined;
property allowFullScreen
allowFullScreen?: boolean | undefined;
property allowTransparency
allowTransparency?: boolean | undefined;
property alt
alt?: string | undefined;
property as
as?: string | undefined;
property async
async?: boolean | undefined;
property autoComplete
autoComplete?: string | undefined;
property autoFocus
autoFocus?: boolean | undefined;
property autoPlay
autoPlay?: boolean | undefined;
property capture
capture?: boolean | 'user' | 'environment' | undefined;
property cellPadding
cellPadding?: number | string | undefined;
property cellSpacing
cellSpacing?: number | string | undefined;
property challenge
challenge?: string | undefined;
property charSet
charSet?: string | undefined;
property checked
checked?: boolean | undefined;
property cite
cite?: string | undefined;
property classID
classID?: string | undefined;
property cols
cols?: number | undefined;
property colSpan
colSpan?: number | undefined;
property content
content?: string | undefined;
property controls
controls?: boolean | undefined;
property coords
coords?: string | undefined;
property crossOrigin
crossOrigin?: 'anonymous' | 'use-credentials' | '' | undefined;
property data
data?: string | undefined;
property dateTime
dateTime?: string | undefined;
property default
default?: boolean | undefined;
property defer
defer?: boolean | undefined;
property disabled
disabled?: boolean | undefined;
property download
download?: any;
property encType
encType?: string | undefined;
property form
form?: string | undefined;
property formAction
formAction?: string | undefined;
property formEncType
formEncType?: string | undefined;
property formMethod
formMethod?: string | undefined;
property formNoValidate
formNoValidate?: boolean | undefined;
property formTarget
formTarget?: string | undefined;
property frameBorder
frameBorder?: number | string | undefined;
property headers
headers?: string | undefined;
property height
height?: number | string | undefined;
property high
high?: number | undefined;
property href
href?: string | undefined;
property hrefLang
hrefLang?: string | undefined;
property htmlFor
htmlFor?: string | undefined;
property httpEquiv
httpEquiv?: string | undefined;
property integrity
integrity?: string | undefined;
property keyParams
keyParams?: string | undefined;
property keyType
keyType?: string | undefined;
property kind
kind?: string | undefined;
property label
label?: string | undefined;
property list
list?: string | undefined;
property loop
loop?: boolean | undefined;
property low
low?: number | undefined;
property manifest
manifest?: string | undefined;
property marginHeight
marginHeight?: number | undefined;
property marginWidth
marginWidth?: number | undefined;
property max
max?: number | string | undefined;
property maxLength
maxLength?: number | undefined;
property media
media?: string | undefined;
property mediaGroup
mediaGroup?: string | undefined;
property method
method?: string | undefined;
property min
min?: number | string | undefined;
property minLength
minLength?: number | undefined;
property multiple
multiple?: boolean | undefined;
property muted
muted?: boolean | undefined;
property name
name?: string | undefined;
property noValidate
noValidate?: boolean | undefined;
property open
open?: boolean | undefined;
property optimum
optimum?: number | undefined;
property pattern
pattern?: string | undefined;
property placeholder
placeholder?: string | undefined;
property playsInline
playsInline?: boolean | undefined;
property poster
poster?: string | undefined;
property preload
preload?: string | undefined;
property readOnly
readOnly?: boolean | undefined;
property rel
rel?: string | undefined;
property required
required?: boolean | undefined;
property reversed
reversed?: boolean | undefined;
property rows
rows?: number | undefined;
property rowSpan
rowSpan?: number | undefined;
property sandbox
sandbox?: string | undefined;
property scope
scope?: string | undefined;
property scoped
scoped?: boolean | undefined;
property scrolling
scrolling?: string | undefined;
property seamless
seamless?: boolean | undefined;
property selected
selected?: boolean | undefined;
property shape
shape?: string | undefined;
property size
size?: number | undefined;
property sizes
sizes?: string | undefined;
property span
span?: number | undefined;
property src
src?: string | undefined;
property srcDoc
srcDoc?: string | undefined;
property srcLang
srcLang?: string | undefined;
property srcSet
srcSet?: string | undefined;
property start
start?: number | undefined;
property step
step?: number | string | undefined;
property summary
summary?: string | undefined;
property target
target?: string | undefined;
property type
type?: string | undefined;
property useMap
useMap?: string | undefined;
property value
value?: string | ReadonlyArray<string> | number | undefined;
property width
width?: number | string | undefined;
property wmode
wmode?: string | undefined;
property wrap
wrap?: string | undefined;
interface AnchorHTMLAttributes
interface AnchorHTMLAttributes<T> extends HTMLAttributes<T> {}
property download
download?: any;
property href
href?: string | undefined;
property hrefLang
hrefLang?: string | undefined;
property media
media?: string | undefined;
property ping
ping?: string | undefined;
property referrerPolicy
referrerPolicy?: HTMLAttributeReferrerPolicy | undefined;
property rel
rel?: string | undefined;
property target
target?: HTMLAttributeAnchorTarget | undefined;
property type
type?: string | undefined;
interface AnimationEvent
interface AnimationEvent<T = Element> extends SyntheticEvent<T, NativeAnimationEvent> {}
property animationName
animationName: string;
property elapsedTime
elapsedTime: number;
property pseudoElement
pseudoElement: string;
interface AreaHTMLAttributes
interface AreaHTMLAttributes<T> extends HTMLAttributes<T> {}
property alt
alt?: string | undefined;
property coords
coords?: string | undefined;
property download
download?: any;
property href
href?: string | undefined;
property hrefLang
hrefLang?: string | undefined;
property media
media?: string | undefined;
property referrerPolicy
referrerPolicy?: HTMLAttributeReferrerPolicy | undefined;
property rel
rel?: string | undefined;
property shape
shape?: string | undefined;
property target
target?: string | undefined;
interface AriaAttributes
interface AriaAttributes {}
property 'aria-activedescendant'
'aria-activedescendant'?: string | undefined;
Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.
property 'aria-atomic'
'aria-atomic'?: Booleanish | 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.
property 'aria-autocomplete'
'aria-autocomplete'?: 'none' | 'inline' | 'list' | 'both' | 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.
property 'aria-busy'
'aria-busy'?: Booleanish | 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.
property 'aria-checked'
'aria-checked'?: boolean | 'false' | 'mixed' | 'true' | undefined;
Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.
See Also
aria-pressed
aria-selected.
property 'aria-colcount'
'aria-colcount'?: number | undefined;
Defines the total number of columns in a table, grid, or treegrid.
See Also
aria-colindex.
property 'aria-colindex'
'aria-colindex'?: number | undefined;
Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.
See Also
aria-colcount
aria-colspan.
property 'aria-colspan'
'aria-colspan'?: number | undefined;
Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.
See Also
aria-colindex
aria-rowspan.
property 'aria-controls'
'aria-controls'?: string | undefined;
Identifies the element (or elements) whose contents or presence are controlled by the current element.
See Also
aria-owns.
property 'aria-current'
'aria-current'?: | boolean | 'false' | 'true' | 'page' | 'step' | 'location' | 'date' | 'time' | undefined;
Indicates the element that represents the current item within a container or set of related elements.
property 'aria-describedby'
'aria-describedby'?: string | undefined;
Identifies the element (or elements) that describes the object.
See Also
aria-labelledby
property 'aria-details'
'aria-details'?: string | undefined;
Identifies the element that provides a detailed, extended description for the object.
See Also
aria-describedby.
property 'aria-disabled'
'aria-disabled'?: Booleanish | undefined;
Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.
See Also
aria-hidden
aria-readonly.
property 'aria-dropeffect'
'aria-dropeffect'?: | 'none' | 'copy' | 'execute' | 'link' | 'move' | 'popup' | undefined;
Indicates what functions can be performed when a dragged object is released on the drop target.
Deprecated
in ARIA 1.1
property 'aria-errormessage'
'aria-errormessage'?: string | undefined;
Identifies the element that provides an error message for the object.
See Also
aria-invalid
aria-describedby.
property 'aria-expanded'
'aria-expanded'?: Booleanish | undefined;
Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.
property 'aria-flowto'
'aria-flowto'?: string | 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.
property 'aria-grabbed'
'aria-grabbed'?: Booleanish | undefined;
Indicates an element's "grabbed" state in a drag-and-drop operation.
Deprecated
in ARIA 1.1
property 'aria-haspopup'
'aria-haspopup'?: | boolean | 'false' | 'true' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | undefined;
Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.
property 'aria-hidden'
'aria-hidden'?: Booleanish | undefined;
Indicates whether the element is exposed to an accessibility API.
See Also
aria-disabled.
property 'aria-invalid'
'aria-invalid'?: boolean | 'false' | 'true' | 'grammar' | 'spelling' | undefined;
Indicates the entered value does not conform to the format expected by the application.
See Also
aria-errormessage.
property 'aria-keyshortcuts'
'aria-keyshortcuts'?: string | undefined;
Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.
property 'aria-label'
'aria-label'?: string | undefined;
Defines a string value that labels the current element.
See Also
aria-labelledby.
property 'aria-labelledby'
'aria-labelledby'?: string | undefined;
Identifies the element (or elements) that labels the current element.
See Also
aria-describedby.
property 'aria-level'
'aria-level'?: number | undefined;
Defines the hierarchical level of an element within a structure.
property 'aria-live'
'aria-live'?: 'off' | 'assertive' | 'polite' | 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.
property 'aria-modal'
'aria-modal'?: Booleanish | undefined;
Indicates whether an element is modal when displayed.
property 'aria-multiline'
'aria-multiline'?: Booleanish | undefined;
Indicates whether a text box accepts multiple lines of input or only a single line.
property 'aria-multiselectable'
'aria-multiselectable'?: Booleanish | undefined;
Indicates that the user may select more than one item from the current selectable descendants.
property 'aria-orientation'
'aria-orientation'?: 'horizontal' | 'vertical' | undefined;
Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.
property 'aria-owns'
'aria-owns'?: string | 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 Also
aria-controls.
property 'aria-placeholder'
'aria-placeholder'?: string | undefined;
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.
property 'aria-posinset'
'aria-posinset'?: number | 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 Also
aria-setsize.
property 'aria-pressed'
'aria-pressed'?: boolean | 'false' | 'mixed' | 'true' | undefined;
Indicates the current "pressed" state of toggle buttons.
See Also
aria-checked
aria-selected.
property 'aria-readonly'
'aria-readonly'?: Booleanish | undefined;
Indicates that the element is not editable, but is otherwise operable.
See Also
aria-disabled.
property 'aria-relevant'
'aria-relevant'?: | 'additions' | 'additions removals' | 'additions text' | 'all' | 'removals' | 'removals additions' | 'removals text' | 'text' | 'text additions' | 'text removals' | undefined;
Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.
See Also
aria-atomic.
property 'aria-required'
'aria-required'?: Booleanish | undefined;
Indicates that user input is required on the element before a form may be submitted.
property 'aria-roledescription'
'aria-roledescription'?: string | undefined;
Defines a human-readable, author-localized description for the role of an element.
property 'aria-rowcount'
'aria-rowcount'?: number | undefined;
Defines the total number of rows in a table, grid, or treegrid.
See Also
aria-rowindex.
property 'aria-rowindex'
'aria-rowindex'?: number | undefined;
Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.
See Also
aria-rowcount
aria-rowspan.
property 'aria-rowspan'
'aria-rowspan'?: number | undefined;
Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.
See Also
aria-rowindex
aria-colspan.
property 'aria-selected'
'aria-selected'?: Booleanish | undefined;
Indicates the current "selected" state of various widgets.
See Also
aria-checked
aria-pressed.
property 'aria-setsize'
'aria-setsize'?: number | undefined;
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 Also
aria-posinset.
property 'aria-sort'
'aria-sort'?: 'none' | 'ascending' | 'descending' | 'other' | undefined;
Indicates if items in a table or grid are sorted in ascending or descending order.
property 'aria-valuemax'
'aria-valuemax'?: number | undefined;
Defines the maximum allowed value for a range widget.
property 'aria-valuemin'
'aria-valuemin'?: number | undefined;
Defines the minimum allowed value for a range widget.
property 'aria-valuenow'
'aria-valuenow'?: number | undefined;
Defines the current value for a range widget.
See Also
aria-valuetext.
property 'aria-valuetext'
'aria-valuetext'?: string | undefined;
Defines the human readable text alternative of aria-valuenow for a range widget.
interface AudioHTMLAttributes
interface AudioHTMLAttributes<T> extends MediaHTMLAttributes<T> {}
interface BaseHTMLAttributes
interface BaseHTMLAttributes<T> extends HTMLAttributes<T> {}
interface BaseSyntheticEvent
interface BaseSyntheticEvent<E = object, C = any, T = any> {}
property bubbles
bubbles: boolean;
property cancelable
cancelable: boolean;
property currentTarget
currentTarget: C;
property defaultPrevented
defaultPrevented: boolean;
property eventPhase
eventPhase: number;
property isTrusted
isTrusted: boolean;
property nativeEvent
nativeEvent: E;
property target
target: T;
property timeStamp
timeStamp: number;
property type
type: string;
method isDefaultPrevented
isDefaultPrevented: () => boolean;
method isPropagationStopped
isPropagationStopped: () => boolean;
method persist
persist: () => void;
method preventDefault
preventDefault: () => void;
method stopPropagation
stopPropagation: () => void;
interface BlockquoteHTMLAttributes
interface BlockquoteHTMLAttributes<T> extends HTMLAttributes<T> {}
property cite
cite?: string | undefined;
interface ButtonHTMLAttributes
interface ButtonHTMLAttributes<T> extends HTMLAttributes<T> {}
property autoFocus
autoFocus?: boolean | undefined;
property disabled
disabled?: boolean | undefined;
property form
form?: string | undefined;
property formAction
formAction?: string | undefined;
property formEncType
formEncType?: string | undefined;
property formMethod
formMethod?: string | undefined;
property formNoValidate
formNoValidate?: boolean | undefined;
property formTarget
formTarget?: string | undefined;
property name
name?: string | undefined;
property type
type?: 'submit' | 'reset' | 'button' | undefined;
property value
value?: string | ReadonlyArray<string> | number | undefined;
interface CanvasHTMLAttributes
interface CanvasHTMLAttributes<T> extends HTMLAttributes<T> {}
interface ChangeEvent
interface ChangeEvent<T = Element> extends SyntheticEvent<T> {}
property target
target: EventTarget & T;
interface ChildContextProvider
interface ChildContextProvider<CC> {}
method getChildContext
getChildContext: () => CC;
interface ClassAttributes
interface ClassAttributes<T> extends Attributes {}
property ref
ref?: LegacyRef<T> | undefined;
interface ClassicComponent
interface ClassicComponent<P = {}, S = {}> extends Component<P, S> {}
method getInitialState
getInitialState: () => S;
method isMounted
isMounted: () => boolean;
method replaceState
replaceState: (nextState: S, callback?: () => void) => void;
interface ClassicComponentClass
interface ClassicComponentClass<P = {}> extends ComponentClass<P> {}
method getDefaultProps
getDefaultProps: () => P;
construct signature
new (props: P, context?: any): ClassicComponent<P, ComponentState>;
interface ClipboardEvent
interface ClipboardEvent<T = Element> extends SyntheticEvent<T, NativeClipboardEvent> {}
property clipboardData
clipboardData: DataTransfer;
interface ColgroupHTMLAttributes
interface ColgroupHTMLAttributes<T> extends HTMLAttributes<T> {}
property span
span?: number | undefined;
interface ColHTMLAttributes
interface ColHTMLAttributes<T> extends HTMLAttributes<T> {}
interface Component
interface Component<P = {}, S = {}, SS = any> extends ComponentLifecycle<P, S, SS> {}
interface ComponentClass
interface ComponentClass<P = {}, S = ComponentState> extends StaticLifecycle<P, S> {}
property childContextTypes
childContextTypes?: ValidationMap<any> | undefined;
property contextType
contextType?: Context<any> | undefined;
property contextTypes
contextTypes?: ValidationMap<any> | undefined;
property defaultProps
defaultProps?: Partial<P> | undefined;
property displayName
displayName?: string | undefined;
property propTypes
propTypes?: WeakValidationMap<P> | undefined;
construct signature
new (props: P, context?: any): Component<P, S>;
interface ComponentElement
interface ComponentElement<P, T extends Component<P, ComponentState>> extends ReactElement<P, ComponentClass<P>> {}
property ref
ref?: LegacyRef<T> | undefined;
interface ComponentLifecycle
interface ComponentLifecycle<P, S, SS = any> extends NewLifecycle<P, S, SS>, DeprecatedLifecycle<P, S> {}
method componentDidCatch
componentDidCatch: (error: Error, errorInfo: ErrorInfo) => void;
Catches exceptions generated in descendant components. Unhandled exceptions will cause the entire component tree to unmount.
method componentDidMount
componentDidMount: () => void;
Called immediately after a component is mounted. Setting state here will trigger re-rendering.
method componentWillUnmount
componentWillUnmount: () => void;
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
.
method shouldComponentUpdate
shouldComponentUpdate: ( nextProps: Readonly<P>, nextState: Readonly<S>, nextContext: any) => boolean;
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
andcomponentDidUpdate
will not be called.
interface ComponentSpec
interface ComponentSpec<P, S> extends Mixin<P, S> {}
method render
render: () => ReactNode;
index signature
[propertyName: string]: any;
interface CompositionEvent
interface CompositionEvent<T = Element> extends SyntheticEvent<T, NativeCompositionEvent> {}
property data
data: string;
interface ConsumerProps
interface ConsumerProps<T> {}
property children
children: (value: T) => ReactNode;
interface Context
interface Context<T> {}
property Consumer
Consumer: Consumer<T>;
property displayName
displayName?: string | undefined;
property Provider
Provider: Provider<T>;
interface CSSProperties
interface CSSProperties extends CSS.Properties<string | number> {}
interface DataHTMLAttributes
interface DataHTMLAttributes<T> extends HTMLAttributes<T> {}
property value
value?: string | ReadonlyArray<string> | number | undefined;
interface DelHTMLAttributes
interface DelHTMLAttributes<T> extends HTMLAttributes<T> {}
interface DeprecatedLifecycle
interface DeprecatedLifecycle<P, S> {}
method componentWillMount
componentWillMount: () => void;
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.
See Also
https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state
https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path
Deprecated
16.3, use componentDidMount or the constructor instead; will stop working in React 17
method componentWillReceiveProps
componentWillReceiveProps: (nextProps: Readonly<P>, nextContext: any) => void;
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.
See Also
https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props
https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path
Deprecated
16.3, use static getDerivedStateFromProps instead; will stop working in React 17
method componentWillUpdate
componentWillUpdate: ( nextProps: Readonly<P>, nextState: Readonly<S>, nextContext: any) => void;
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.
See Also
https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update
https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path
Deprecated
16.3, use getSnapshotBeforeUpdate instead; will stop working in React 17
method UNSAFE_componentWillMount
UNSAFE_componentWillMount: () => void;
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.
See Also
https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#initializing-state
https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path
Deprecated
16.3, use componentDidMount or the constructor instead
method UNSAFE_componentWillReceiveProps
UNSAFE_componentWillReceiveProps: ( nextProps: Readonly<P>, nextContext: any) => void;
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.
See Also
https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props
https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path
Deprecated
16.3, use static getDerivedStateFromProps instead
method UNSAFE_componentWillUpdate
UNSAFE_componentWillUpdate: ( nextProps: Readonly<P>, nextState: Readonly<S>, nextContext: any) => void;
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.
See Also
https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#reading-dom-properties-before-an-update
https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path
Deprecated
16.3, use getSnapshotBeforeUpdate instead
interface DetailedHTMLFactory
interface DetailedHTMLFactory<P extends HTMLAttributes<T>, T extends HTMLElement> extends DOMFactory<P, T> {}
call signature
( props?: (ClassAttributes<T> & P) | null, ...children: ReactNode[]): DetailedReactHTMLElement<P, T>;
interface DetailedReactHTMLElement
interface DetailedReactHTMLElement< P extends HTMLAttributes<T>, T extends HTMLElement> extends DOMElement<P, T> {}
property type
type: keyof ReactHTML;
interface DetailsHTMLAttributes
interface DetailsHTMLAttributes<T> extends HTMLAttributes<T> {}
interface DialogHTMLAttributes
interface DialogHTMLAttributes<T> extends HTMLAttributes<T> {}
interface DirectionalSuspenseListProps
interface DirectionalSuspenseListProps extends SuspenseListCommonProps {}
property revealOrder
revealOrder: 'forwards' | 'backwards';
Defines the order in which the
SuspenseList
children should be revealed.
property tail
tail?: SuspenseListTailMode | undefined;
Dictates how unloaded items in a SuspenseList is shown.
- By default,
SuspenseList
will show all fallbacks in the list. -collapsed
shows only the next fallback in the list. -hidden
doesn’t show any unloaded items.
interface DOMAttributes
interface DOMAttributes<T> {}
property children
children?: ReactNode | undefined;
property dangerouslySetInnerHTML
dangerouslySetInnerHTML?: | { __html: string; } | undefined;
property onAbort
onAbort?: ReactEventHandler<T> | undefined;
property onAbortCapture
onAbortCapture?: ReactEventHandler<T> | undefined;
property onAnimationEnd
onAnimationEnd?: AnimationEventHandler<T> | undefined;
property onAnimationEndCapture
onAnimationEndCapture?: AnimationEventHandler<T> | undefined;
property onAnimationIteration
onAnimationIteration?: AnimationEventHandler<T> | undefined;
property onAnimationIterationCapture
onAnimationIterationCapture?: AnimationEventHandler<T> | undefined;
property onAnimationStart
onAnimationStart?: AnimationEventHandler<T> | undefined;
property onAnimationStartCapture
onAnimationStartCapture?: AnimationEventHandler<T> | undefined;
property onAuxClick
onAuxClick?: MouseEventHandler<T> | undefined;
property onAuxClickCapture
onAuxClickCapture?: MouseEventHandler<T> | undefined;
property onBeforeInput
onBeforeInput?: FormEventHandler<T> | undefined;
property onBeforeInputCapture
onBeforeInputCapture?: FormEventHandler<T> | undefined;
property onBlur
onBlur?: FocusEventHandler<T> | undefined;
property onBlurCapture
onBlurCapture?: FocusEventHandler<T> | undefined;
property onCanPlay
onCanPlay?: ReactEventHandler<T> | undefined;
property onCanPlayCapture
onCanPlayCapture?: ReactEventHandler<T> | undefined;
property onCanPlayThrough
onCanPlayThrough?: ReactEventHandler<T> | undefined;
property onCanPlayThroughCapture
onCanPlayThroughCapture?: ReactEventHandler<T> | undefined;
property onChange
onChange?: FormEventHandler<T> | undefined;
property onChangeCapture
onChangeCapture?: FormEventHandler<T> | undefined;
property onClick
onClick?: MouseEventHandler<T> | undefined;
property onClickCapture
onClickCapture?: MouseEventHandler<T> | undefined;
property onCompositionEnd
onCompositionEnd?: CompositionEventHandler<T> | undefined;
property onCompositionEndCapture
onCompositionEndCapture?: CompositionEventHandler<T> | undefined;
property onCompositionStart
onCompositionStart?: CompositionEventHandler<T> | undefined;
property onCompositionStartCapture
onCompositionStartCapture?: CompositionEventHandler<T> | undefined;
property onCompositionUpdate
onCompositionUpdate?: CompositionEventHandler<T> | undefined;
property onCompositionUpdateCapture
onCompositionUpdateCapture?: CompositionEventHandler<T> | undefined;
property onContextMenu
onContextMenu?: MouseEventHandler<T> | undefined;
property onContextMenuCapture
onContextMenuCapture?: MouseEventHandler<T> | undefined;
property onCopy
onCopy?: ClipboardEventHandler<T> | undefined;
property onCopyCapture
onCopyCapture?: ClipboardEventHandler<T> | undefined;
property onCut
onCut?: ClipboardEventHandler<T> | undefined;
property onCutCapture
onCutCapture?: ClipboardEventHandler<T> | undefined;
property onDoubleClick
onDoubleClick?: MouseEventHandler<T> | undefined;
property onDoubleClickCapture
onDoubleClickCapture?: MouseEventHandler<T> | undefined;
property onDrag
onDrag?: DragEventHandler<T> | undefined;
property onDragCapture
onDragCapture?: DragEventHandler<T> | undefined;
property onDragEnd
onDragEnd?: DragEventHandler<T> | undefined;
property onDragEndCapture
onDragEndCapture?: DragEventHandler<T> | undefined;
property onDragEnter
onDragEnter?: DragEventHandler<T> | undefined;
property onDragEnterCapture
onDragEnterCapture?: DragEventHandler<T> | undefined;
property onDragExit
onDragExit?: DragEventHandler<T> | undefined;
property onDragExitCapture
onDragExitCapture?: DragEventHandler<T> | undefined;
property onDragLeave
onDragLeave?: DragEventHandler<T> | undefined;
property onDragLeaveCapture
onDragLeaveCapture?: DragEventHandler<T> | undefined;
property onDragOver
onDragOver?: DragEventHandler<T> | undefined;
property onDragOverCapture
onDragOverCapture?: DragEventHandler<T> | undefined;
property onDragStart
onDragStart?: DragEventHandler<T> | undefined;
property onDragStartCapture
onDragStartCapture?: DragEventHandler<T> | undefined;
property onDrop
onDrop?: DragEventHandler<T> | undefined;
property onDropCapture
onDropCapture?: DragEventHandler<T> | undefined;
property onDurationChange
onDurationChange?: ReactEventHandler<T> | undefined;
property onDurationChangeCapture
onDurationChangeCapture?: ReactEventHandler<T> | undefined;
property onEmptied
onEmptied?: ReactEventHandler<T> | undefined;
property onEmptiedCapture
onEmptiedCapture?: ReactEventHandler<T> | undefined;
property onEncrypted
onEncrypted?: ReactEventHandler<T> | undefined;
property onEncryptedCapture
onEncryptedCapture?: ReactEventHandler<T> | undefined;
property onEnded
onEnded?: ReactEventHandler<T> | undefined;
property onEndedCapture
onEndedCapture?: ReactEventHandler<T> | undefined;
property onError
onError?: ReactEventHandler<T> | undefined;
property onErrorCapture
onErrorCapture?: ReactEventHandler<T> | undefined;
property onFocus
onFocus?: FocusEventHandler<T> | undefined;
property onFocusCapture
onFocusCapture?: FocusEventHandler<T> | undefined;
property onGotPointerCapture
onGotPointerCapture?: PointerEventHandler<T> | undefined;
property onGotPointerCaptureCapture
onGotPointerCaptureCapture?: PointerEventHandler<T> | undefined;
property onInput
onInput?: FormEventHandler<T> | undefined;
property onInputCapture
onInputCapture?: FormEventHandler<T> | undefined;
property onInvalid
onInvalid?: FormEventHandler<T> | undefined;
property onInvalidCapture
onInvalidCapture?: FormEventHandler<T> | undefined;
property onKeyDown
onKeyDown?: KeyboardEventHandler<T> | undefined;
property onKeyDownCapture
onKeyDownCapture?: KeyboardEventHandler<T> | undefined;
property onKeyPress
onKeyPress?: KeyboardEventHandler<T> | undefined;
Deprecated
property onKeyPressCapture
onKeyPressCapture?