Difference between React Component and React Element

Question

What is the difference between React Component and React Element? The documentation mentions both but does not go into detail, some methods require components, other element

Answer 1

Here is my take :

Element is the thing that describes how to construct the VDOM. It's basically a "frozen" version of the corresponding Component Instance.

If everything would be functional component then there would be no need for an extra react Element. The functional component hierarchy could produce the VDOM tree directly.

A react Component Instance hierarchy (tree) is a "factory", and that factory is parametrized by the props which are fed to the root react Component Instance and by all the state "stored" anywhere in the Component Instance tree.

So the react Element is basically an "abstract syntax tree" which gets compiled into the actual VDOM.

So why not generate the VDOM directly by using the react Component Instances ? This is the real question here.

At the first glance I don't see why it would not be possible to do so. So most likely the answer is that it's a question of performance.

The react Element is one layer of abstraction between the VDOM and the Component Instance, why this abstraction is needed is not entirely clear to me, most likely it allows optimizations. For example the Element tree does not get rendered completely if some lifecycle method on the Component Instance says that there is no need to render that subtree.

Now, in this case, the logic which handles this optimization "needs" this extra layer of indirection - because the information needs to be stored somewhere that some part of the VDOM should not be compared with the new VDOM, even more, maybe the new VDOM should not be even calculated at all. So using an extra layer of indirection makes the rendering logic simpler and leads to a cleaner, more maintainable implementation - I imagine.

This concept in Haskell is called "lifting" :

For example monads in Haskell are perfect examples of such liftings.

A monad is sort of a description of a computation that can be stored as a value, like 42. Similarly, react Elements are elments of a description on how to compute the "new" VDOM. If somebody wants to compute it.

This talk describes this concept of an "extra" indirection with some simple examples :

In other words : premature optimization is the root of all evil.

Or :Fundamental theorem of software engineering

The fundamental theorem of software engineering (FTSE) is a term originated by Andrew Koenig to describe a remark by Butler Lampson1 attributed to the late David J. Wheeler:2

We can solve any problem by introducing an extra level of indirection.

So, in my understanding react Elements are an implementation detail to handle complexity gracefully and allow some optimization (performance). I don't see why one could not get rid of this extra indirection - in principle - react would still work "just as well" - but it might be super slow, implementing and maintaining the react "engine" itself would be probably a nightmare.

Please correct me if I am missing here something.

Quoting an IMPORTANT part of user6445533's answer :

type, a String representing an HTML tag or a reference referring to a React Component

THIS IS THE KEY ^^^^

Element IS NOT VDOM.