# 11 JSX.Element vs ReactElement

When to use JSX.Element vs ReactNode vs ReactElement?

```javascript
<p> // <- ReactElement = JSX.Element
  <Custom> // <- ReactElement = JSX.Element
     {true && "test"} // <- ReactNode
  </Custom>
</p>
```

A ReactElement is an object with a type and props.

```typescript
type Key = string | number

interface ReactElement<P = any, T extends string | JSXElementConstructor<any> = string | JSXElementConstructor<any>> {
  type: T
  props: P
  key: Key | null
}
```

A ReactNode is a ReactElement, a ReactFragment, a string, a number or an array of ReactNodes, or null, or undefined, or a boolean.

```typescript
type ReactText = string | number
type ReactChild = ReactElement | ReactText

interface ReactNodeArray extends Array<ReactNode> {}
type ReactFragment = {} | ReactNodeArray

type ReactNode = ReactChild | ReactFragment | ReactPortal | boolean | null | undefined
```

JSX.Element is a ReactElement, with the generic type for props and type being any. so they are more or less the same.

```typescript
declare global {
  namespace JSX {
    interface Element extends React.ReactElement<any, any> {}
  }
}
```

Components return:

```typescript
render(): ReactNode;
```

And functions are "stateless components":

```typescript
interface StatelessComponent<P = {}> {
  (props: P & { children?: ReactNode }, context?: any): ReactElement | null
  // ... doesn't matter
}
```

* **TS class component: returns ReactNode with render(), more permissive than React/JS**
* **TS function component: returns JSX.Element | null, more restrictive than React/JS**


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://chanshiyu.gitbook.io/blog/qian-duan/javascript/11-jsx.element-vs-reactelement.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.