CODEWITHSUNDEEP
reactjstypescript
xli
xli

Reputation: 1308

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

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

Upvotes: 24

Views: 20571

Answers (2)

ford04
ford04

Reputation: 74740

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:

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

Upvotes: 9

Aaron
Aaron

Reputation: 7145

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.

Upvotes: 25

Related Questions