Skip to main content

React Type Reference

React exports a handful of utility types that may be useful to you when typing advanced React patterns. In previous sections we have seen a few of them. The following is a complete reference for each of these types along with some examples for how/where to use them.

These types are all exported as named type exports from the react module. If you want to access them as members on the React object (e.g. React.Node) and you are importing React as an ES module then you can import React either as a namespace or as a default import:

1import * as React from 'react';2
3<div /> as React.MixedElement; // OK
1import React from 'react';2
3<div /> as React.MixedElement; // OK

If you are using CommonJS you can also require React:

1const React = require('react');

You can also use named type imports in either an ES module environment or a CommonJS environment:

1import type {Node} from 'react';

Content types​

Types for the content a component renders or accepts as children.

React.Node​

This represents any node that can be rendered in a React application. React.Node can be undefined, null, a boolean, a number, a string, a React element, a React portal, or an iterable (including arrays) of any of those, possibly nested.

Its most common use is typing the children a component takes in. With Component Syntax, declare children like any other parameter:

1import * as React from 'react';2
3component MyComponent(children: React.Node) {4  return <div>{children}</div>;5}

All react-dom JSX intrinsics have React.Node as their children type: <div>, <span>, and all the rest.

React.Node is also a good default to annotate the return type of a function component or a class render method. (Component Syntax infers this return type, so you do not write it there.)

1import * as React from 'react';2
3function MyComponent(props: {}): React.Node {4  return null;5}6
7class MyClassComponent extends React.Component<{}> {8  render(): React.Node {9    return null;10  }11}
TypeScript comparison

Use React.Node, not TypeScript's ReactNode. React.Node already includes null, undefined, and false, so you do not need to add those yourself when a value may be absent.

React.MixedElement​

The most general type of all React elements (similar to unknown for all values).

Unlike React.Node, React.MixedElement is a single element only. It does not include strings, numbers, arrays, null, undefined, or false.

A common use case of this type is when we want to annotate an element with a type that hides the element details. For example

1import * as React from 'react';2
3const element: React.MixedElement = <div />;

Choosing between React.Node, renders, and React.MixedElement​

When you need to type a value that holds renderable React content, pick based on how much you want to constrain it:

  • React.Node: anything renderable (elements, strings, numbers, arrays, null, undefined, false). Use it for children and any prop or return position that accepts arbitrary content. This is the default.
  • renders Foo: a value that renders the specific element Foo (or something that renders Foo). Use it when a prop must be a particular design-system element rather than arbitrary content.
  • React.MixedElement: exactly one React element, with its specific type hidden. Unlike React.Node, it does not include strings, numbers, arrays, null, undefined, or false. Use it when you need a single element but do not care which one.

React.ChildrenArray<T>​

A React children array can be a single value or an array nested to any level. It is designed to be used with the React.Children API.

For example if you want to get a normal JavaScript array from a React.ChildrenArray<T> see the following example:

1import * as React from 'react';2
3// A children array can be a single value...4const childrenSingle: React.ChildrenArray<number> = 42;5// ...or an arbitrarily nested array.6const childrenNested: React.ChildrenArray<number> = [[1, 2], 3, [4, 5]];7
8// Using the `React.Children` API can flatten a single value into an array.9const array: Array<number> = React.Children.toArray(childrenSingle);

Component and element types​

Types that describe components, element types, and element keys.

React.ComponentType<Props>​

The type of a component that accepts an object of props Props. It is equivalent to the Component Type component(...Props):

1import * as React from 'react';2
3type Props = {foo: number};4
5// `React.ComponentType<Props>` is equivalent to `component(...Props)`:6declare const a: React.ComponentType<Props>;7declare const b: component(...Props);8
9a as component(...Props); // OK10b as React.ComponentType<Props>; // OK

A React.ComponentType<Props> value can be rendered with the props it expects:

1import * as React from 'react';2
3declare const Comp: React.ComponentType<{foo: number}>;4
5<Comp foo={3} />; // OK6<Comp />; // ERROR: `foo` is requiredincompatible-typeCannot create Comp element because property foo is missing in props [1] but exists in object type [2].

React.ElementType​

Similar to Component Types except it also includes JSX intrinsics (strings).

The definition for React.ElementType is roughly:

1import * as React from 'react';2
3type ElementType =4  | string5  | React.ComponentType<empty>;

It accepts both JSX intrinsics and components:

1import * as React from 'react';2
3component Button() {4  return <button />;5}6
7const intrinsic: React.ElementType = 'div'; // OK: a JSX intrinsic8const custom: React.ElementType = Button; // OK: a component

React.Key​

The type of the key prop on React elements, a union of strings and numbers:

1type Key = string | number;

You rarely need to write React.Key yourself: key is a special prop handled by React, passed directly on elements (<Row key={id} />), and it appears mostly in React's own type definitions.

Ref types​

Types for working with refs. See Refs for the full guide.

React.RefObject<T>​

The type of the value returned by the useRef hook. Use it to annotate anything that holds or accepts that ref object.

1import {useRef} from 'react';2
3declare class Dog {}4hook useRefDemo() {5  const ref: React.RefObject<?Dog> = useRef<?Dog>(null);6}

See Refs for how it is used with useRef.

React.RefSetter<T>​

The general type of the ref prop on React elements, and the type you give a component's ref parameter (for example component Foo(ref: React.RefSetter<T>)). A React.RefSetter<T> accepts both a ref object with T | null stored in the current property and a ref function (callback ref) accepting T.

Give it to a component's ref parameter:

1import * as React from 'react';2
3component TextInput(ref: React.RefSetter<HTMLInputElement>) {4  return <input ref={ref} />;5}

The ref function will take one and only argument which will be the element instance which is retrieved using React.ElementRef<typeof Component> or null since React will pass null into a ref function when unmounting.

The definition for React.RefSetter<T> is roughly:

1type RefSetter<in T> =2  | { writeonly current: T | null, ... }3  | ((T | null) => unknown)4  | null5  | void;

Here in and writeonly are contravariance annotations, which are rarely seen in everyday code.

See Accepting a ref with React.RefSetter for how to accept a ref in a component.

React.RefOf<Component>​

When using Component Syntax, React.RefOf<Component> will give you the type of the current field on the ref prop of the component. If there is no ref prop on the component it will return void.

1import * as React from 'react';2
3component TextInput(ref: React.RefSetter<HTMLInputElement>) {4  return <input ref={ref} />;5}6
7// Forward a ref of the same instance type that `TextInput` exposes.8component LabeledInput(ref: React.RefSetter<React.RefOf<TextInput>>) {9  return <TextInput ref={ref} />;10}

See Deriving ref types for how this relates to refs.

React.ElementRef<typeof Component>​

Gets the instance type for a React element. The instance will be different for various component types:

  • component(ref: React.RefSetter<Instance>) will return the Instance type.
  • React class components will be the class instance. So if you had class Foo extends React.Component<{}> {} and used React.ElementRef<typeof Foo> then the type would be the instance of Foo.
  • React function components do not have a backing instance and so React.ElementRef<typeof Bar> (when Bar is function Bar() {}) will give you the void type.
  • JSX intrinsics like div will give you their DOM instance. For React.ElementRef<'div'> that would be HTMLDivElement. For React.ElementRef<'input'> that would be HTMLInputElement.

Note that typeof Component must be the type of a React component so you need to use typeof as in React.ElementRef<typeof MyComponent>.

1import * as React from 'react';2
3component TextInput(ref: React.RefSetter<HTMLInputElement>) {4  return <input ref={ref} />;5}6
7// The instance type a component exposes via its ref.8declare const instance: React.ElementRef<typeof TextInput>;9instance as HTMLInputElement | null; // OK10
11// For a JSX intrinsic you get the DOM instance directly.12declare const div: React.ElementRef<'div'>;13div as HTMLDivElement; // OK

See Deriving ref types for how this relates to refs.

Prop types​

Types that extract the props a component accepts.

React.PropsOf<Component>​

When Component is written using Component Syntax, React.PropsOf<Component> gives you the type of an object that you must pass in to instantiate Component with JSX. Importantly, the props with defaults are optional in the resulting type.

For example:

1import * as React from 'react';2
3component MyComponent(foo: number, bar: string = 'str') {4  return null;5}6
7// Only foo is required8({foo: 3}) as React.PropsOf<MyComponent>;

React.ElementConfig<typeof Component>​

Like React.PropsOf, this utility gets the type of the object that you must pass in to a component in order to instantiate it via createElement() or jsx(). While PropsOf takes in an element of a component, which is convenient when using Component Syntax, ElementConfig takes in the type of a component instead. typeof Component must be the type of a React component so you need to use typeof as in React.ElementConfig<typeof Component>.

Importantly, props with defaults are optional in the resulting type.

For example,

1import * as React from 'react';2
3component MyComponent(foo: number = 42) {4  return foo;5}6
7// `React.ElementConfig<>` does not require `foo` since it has a default value.8({}) as React.ElementConfig<typeof MyComponent>;

Note that typeof Component must be the type of a React component so you need to use typeof as in React.ElementConfig<typeof MyComponent>.

Deprecated types​

Types kept for backward compatibility. Prefer the alternatives noted below.

ExactReactElement_DEPRECATED<typeof Component>​

warning

This is an exact replacement of the removed React.Element type since 0.245. Use React.MixedElement or React.Node instead. To enforce design system constraints, use render types instead.

The type for the value of a JSX element, parameterized by the element's component type. It is also the return type of React.createElement() / React.jsx().

1import * as React from 'react';2
3const element: ExactReactElement_DEPRECATED<'div'> = <div />;

See Also​

  • Utility Types — Flow's general-purpose utility types
  • Generics — many React types are parameterized with generics