What does React.render return ? Component Instance or Component class?

Question

In this gist, in this line React.render = (ReactElement, HTMLElement | SVGElement) => ReactComponent;

What does ReactComponent refer to ? An instance or a class ?

Reason for asking: I am trying to create a concept map that visualises React terminology (as shown below).

Answer 1

TL;DR React.render returns a ReactComponent instance

---

As you have written, React.render accepts two arguments. It is important to understand their meaning. This bit is confusing so please bear with me.

1) ReactElement - is a virtual dom instance. Sometimes this instance maps to native DOM elements such as 'div', sometimes it maps to ReactComponent instance such as MyComponent that encapsulates a tree of other ReactElements. You see the recursion here?

ReactElement -> Tree<ReactComponent returns ReactElement -> Tree<ReactComponent returns ReactElement>> 

Now, let's create a virtual dom instance

const virtualElement = React.createElement('MyComponent');

2) The second arguments is a native DOM element to render the virtualElement into.

Basically what React.render does is to translate the virtualElement in native DOM element and insert it into the native DOM element specified as second argument in the React.render function.

---

As a result, React.render returns a ReactComponent instance (stateful representation of encapsulated ReactElement trees).

I think you might be a little frustrated by the notation, but it makes perfect sense. Think of it in terms of Java for example:

function Person getPerson() { 
  return new Person();
}

See, the signature of the function doesn't specify PersonInstance as return value, but rather Person.