JSX.Element vs ReactNode vs ReactElement

Question

When to use JSX.Element vs ReactNode vs ReactElement?

<p> // <- ReactElement = JSX.Element
  <Custom> // <- ReactElement = JSX.Element
     {true && "test"} // <- ReactNode
  </Custom>
</p>

A ReactElement is an object with a type and props.

type Key = string | number

interface ReactElement<P = any, T extends string | JSXElementConstructor<any> = string | JSXElementConstructor<any>> {
  type: T
  props: P
  key: Key | null
}

A ReactNode is a ReactElement, a ReactFragment, a string, a number or an array of ReactNodes, or null, or undefined, or a boolean.

type ReactText = string | number
type ReactChild = ReactElement | ReactText

interface ReactNodeArray extends Array<ReactNode> {}
type ReactFragment = {} | ReactNodeArray

type ReactNode = ReactChild | ReactFragment | ReactPortal | boolean | null | undefined

JSX.Element is a ReactElement, with the generic type for props and type being any. so they are more or less the same.

declare global {
  namespace JSX {
    interface Element extends React.ReactElement<any, any> {}
  }
}

Components return:

render(): ReactNode;

And functions are "stateless components":

interface StatelessComponent<P = {}> {
  (props: P & { children?: ReactNode }, context?: any): ReactElement | null
  // ... doesn't matter
}

• TS class component: returns ReactNode with render(), more permissive than React/JS
• TS function component: returns JSX.Element | null, more restrictive than React/JS