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

It depends. ReactJS in principle can render:

type RenderType = JSX.Element* | Array | 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.