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:
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