20

Basic Question:

What is the difference between the types React.ReactElement vs JSX.Element? Are they the same, when should I use each one?

Improve this question

1 Answer 1

Reset to default
9

Even though JSX can be used in React to create React elements, React does not require JSX to work, you could replace it with vanilla JavaScript.

React elements are simply defined as a description of what you want to see on the screen. In other words, React elements are the instructions for how the browser DOM should be created.

A ReactElement is an object with a type and props. React reads these objects and uses them to construct the DOM. JSX.Element, on the other hand, is a ReactElement with generic type for props and type being any.

Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

This is not entirely true. React works with abstract idea of what the elements (nodes) are. This allows for creating different renderers (like React Native which works with native UI components or ReactDOM which works with HTML DOM or even Ink which renders React Components in terminals).
What isn't entirely true?
@wirher (in case you're missing my question)
Your assumption that the person asking this question uses DOM at all.
Not really, JSX is not something that exists in compiled/transpiled react applications. This is just a syntax built on top of JavaScript for simplifying the declaration of component trees and is usually handled by Babel or TypeScript compiler. I wrote the first comment because this holds true not only for DOM but also for trees of components outside of a browser (e.g. React Native) and I felt like it is worth mentioning.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.