Should a component's render method have return type React.ReactNode or JSX.Element?

Question

Both seem to result in no compilation errors, but what\'s the difference and is one preferable to the other?

Answer 1

This exact question was asked over in the react-typescript-cheatsheet repo issue #57

To quote the original answer:

Regardless of what a component ends up rendering, React.createElement always returns an object, which is the JSX.Element interface, but React.ReactNode is the set of all possible return values of a component.

• JSX.Element -> Return value of React.createElement
• React.ReactNode -> Return value of a component

Generally, I think the idea is that JSX.Element specifically describes the interface of React.createElement and is narrow in scope whereas React.ReactNode is more broad and covers all possible values that a Component could return.

Answer 2

It depends. ReactJS in principle can render:

type RenderType = JSX.Element* | Array<RenderType> | string | number | boolean | null
// * includes Portal, Fragment
// for both function and class components
// (type doesn't exist in React type declarations)

TS render types are currently limited to:

• Class component: ReactNode (wider than permitted by React)

• Function component: JSX.Element | null (more restrictive than React)

JSX.Element is more or less the same as ReactElement, you can use both interchangeably.