What is the React.ReactNode type for?

ReactJunior~2 min read

What `React.ReactNode` is

React.ReactNode is a universal type for any valid React content that can be rendered inside JSX.

It describes everything React can "draw" in the tree:

elements (<div />, <Component />),
strings and numbers,
booleans and null / undefined (they render nothing),
arrays of the same kinds of entities,
React.Fragment.

1. Formal definition (simplified)

javascript

type ReactNode =
  | ReactElement
  | string
  | number
  | boolean
  | null
  | undefined
  | ReactNode[]; // recursive

So React.ReactNode is "everything React can accept as a child element".

2. Where it's used

1) For `children`

The most common use:

javascript

type Props = {
  children: React.ReactNode;
};

function Card({ children }: Props) {
  return <div className="card">{children}</div>;
}

Now Card can be passed any JSX:

javascript

<Card>
  <h1>Title</h1>
  <p>Text</p>
  <button>Button</button>
</Card>

2) For content that can be JSX, a string, or a number

javascript

type Props = {
  label: React.ReactNode; // can be text, an icon, JSX
};

function Button({ label }: Props) {
  return <button>{label}</button>;
}

<Button label="Save" />
<Button label={<SaveIcon />} />
<Button label={42} />

3) For lists and arrays of JSX elements

javascript

const list: React.ReactNode[] = [
  <li key="1">One</li>,
  <li key="2">Two</li>,
];

3. Difference from other types

Type	What it describes	Example use
`React.ReactNode`	Any content React can render	`children`, `content`, `label`
`React.ReactElement`	Only one specific React element	`<div />`, `<Component />`
`JSX.Element`	The same as `ReactElement` (the type of a JSX result)	The value a component returns
`ReactNode[]`	An array of nodes	Lists, fragments

Commonly:

a component's return value: JSX.Element or ReactElement
composition props (children): React.ReactNode

4. Examples of the differences

javascript

function A(): JSX.Element {
  return <div>Ok</div>; // the component returns a JSX.Element
}

function B({ children }: { children: React.ReactNode }) {
  return <div>{children}</div>; // accepts any content
}

5. Why not `JSX.Element` for children

JSX.Element is too narrow a type: it doesn't include strings, numbers, and null.

javascript

// Error if you use JSX.Element
function Title({ children }: { children: JSX.Element }) {
  return <h1>{children}</h1>;
}

// Correct
function Title({ children }: { children: React.ReactNode }) {
  return <h1>{children}</h1>;
}

<Title>Text</Title>; // a string is also a ReactNode

6. When it's better NOT to use `ReactNode`

If a specific type is expected (for example, a render-prop function), it's better to specify () => ReactNode.
If the component should accept only an element, not a string, use ReactElement.

javascript

type Props = {
  trigger: React.ReactElement; // we expect a single JSX element
};

Summary

Parameter	`React.ReactNode`
What it describes	Everything that can be rendered in React
Includes	elements, strings, numbers, `null`, `undefined`, `boolean`, arrays
Often used for	`children`, `label`, `content`, `slot`
Doesn't include	functions, objects, promises (they can't be rendered directly)
Alternative	`ReactElement`, `JSX.Element` - if you need only a single element

In short: React.ReactNode is "everything React can draw". Use it for children and any props that can hold any JSX, text, or number.

If you want to allow only a single React element, use ReactElement.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.