[Solved]-When to use JSX.Element vs ReactNode vs ReactElement?-Reactjs

https://github.com/typescript-cheatsheets/react#useful-react-prop-type-examples

export declare interface AppProps {
  children1: JSX.Element; // bad, doesnt account for arrays
  children2: JSX.Element | JSX.Element[]; // meh, doesn't accept strings
  children3: React.ReactChildren; // despite the name, not at all an appropriate type; it is a utility
  children4: React.ReactChild[]; // better, accepts array children
  children: React.ReactNode; // best, accepts everything (see edge case below)
  functionChildren: (name: string) => React.ReactNode; // recommended function as a child render prop type
  style?: React.CSSProperties; // to pass through style props
  onChange?: React.FormEventHandler<HTMLInputElement>; // form events! the generic parameter is the type of event.target
  //  more info: https://react-typescript-cheatsheet.netlify.app/docs/advanced/patterns_by_usecase/#wrappingmirroring
  props: Props & React.ComponentPropsWithoutRef<"button">; // to impersonate all the props of a button element and explicitly not forwarding its ref
  props2: Props & React.ComponentPropsWithRef<MyButtonWithForwardRef>; // to impersonate all the props of MyButtonForwardedRef and explicitly forwarding its ref
}

ReactElement is the type for elements in React, either created via JSX or React.createElement.

const a = <div/> // this is a ReactElement

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.

const a = (
  <div>
     hello {[1, "world", true]} // this is a ReactNode
  </div>
)

JSX.Element is an internal hook for Typescript. It is set equal to ReactElement to tell Typescript that every JSX expressions should be typed as ReactElements. But if we'd use Preact, or other technologies using JSX it would be set to something else.

Functional components return ReactElement | null, so it cannot return a bare string or an array of ReactElements. It is a known limitation. The workaround is to use Fragments :

const Foo: FC = () => {
  return <>hello world!</>  // this works
}

Class components' render function return ReactNode, so there shouldn't be any problem.

1.) What is the difference between JSX.Element, ReactNode and ReactElement?

ReactElement and JSX.Element are the result of invoking React.createElement directly or via JSX transpilation. It is an object with type, props and key. JSX.Element is ReactElement, whose props and type have type any, so they are more or less the same.

const jsx = <div>hello</div>
const ele = React.createElement("div", null, "hello");

ReactNode is used as return type for render() in class components. It also is the default type for children attribute with PropsWithChildren.

const Comp: FunctionComponent = props => <div>{props.children}</div> 
// children?: React.ReactNode

It looks more complicated in the React type declarations, but is equivalent to:

type ReactNode = {} | null | undefined;
// super type `{}` has absorbed *all* other types, which are sub types of `{}`
// so it is a very "broad" type (I don't want to say useless...)

You can assign almost everything to ReactNode. I usually would prefer stronger types, but there might be some valid cases to use it.

2.) Why do the render methods of class components return ReactNode, but function components return ReactElement?

tl;dr: It is a current TS type incompatibility not related to core React.

• TS class component: returns ReactNode with render(), more permissive than React/JS

• TS function component: returns JSX.Element | null, more restrictive than React/JS

In principle, render() in React/JS class components supports the same return types as a function component. With regard to TS, the different types are a type inconsistency still kept due to historical reasons and the need for backwards-compatibility.

Ideally a valid return type would probably look more like this:

type ComponentReturnType = ReactElement | Array<ComponentReturnType> | string | number 
  | boolean | null // Note: undefined is invalid

3.) How do I solve this with respect to null?

// Use type inference; inferred return type is `JSX.Element | null`
const MyComp1 = ({ condition }: { condition: boolean }) =>
    condition ? <div>Hello</div> : null

// Use explicit function return types; Add `null`, if needed
const MyComp2 = (): JSX.Element => <div>Hello</div>; 
const MyComp3 = (): React.ReactElement => <div>Hello</div>;  
// Option 3 is equivalent to 2 + we don't need to use a global (JSX namespace)

// Use built-in `FunctionComponent` or `FC` type
const MyComp4: React.FC<MyProps> = () => <div>Hello</div>;

Note: Avoiding React.FC won't save you from the JSX.Element | null return type restriction.

Create React App recently dropped React.FC from its template, as it has some quirks like an implicit {children?: ReactNode} type definition. So using React.FC sparingly might be preferable.

const MyCompFragment: FunctionComponent = () => <>"Hello"</>
const MyCompCast: FunctionComponent = () => "Hello" as any 
// alternative to `as any`: `as unknown as JSX.Element | null`