Menu
Both seem to result in no compilation errors, but what's the difference and is one preferable to the other?
562
ReactNode is wider, it can be text, number, boolean, null, undefined, a portal, a ReactElement, or an array of ReactNodes. It represents anything that React can render. JSX. Element is an internal hook for Typescript.
Regardless of what a component ends up rendering, React. createElement always returns an object, which is the JSX.
"The render method returns a description of what the DOM should look like, and then React efficiently updates the real DOM to match."
render() The render() method is the only required method in a class component.
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.createElementalways returns an object, which is theJSX.Elementinterface, butReact.ReactNodeis the set of all possible return values of a component.
JSX.Element-> Return value ofReact.createElementReact.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.
126
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.
22
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
