Difference between React Component and React Element

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 elements...

There are three related kinds of thing involved here, with their own names:

• Components
• Component instances
• Elements

This is slightly surprising, since if you're used to other UI frameworks you might expect that there'd only be two kinds of thing, roughly corresponding to classes (like Widget) and instances (like new Widget()). That's not the case in React; component instances are not the same thing as elements, nor is there a one-to-one relationship between them. To illustrate this, consider this code:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    console.log('This is a component instance:', this);
  }

  render() {
    const another_element = <div>Hello, World!</div>;
    console.log('This is also an element:', another_element);
    return another_element;
  }
}

console.log('This is a component:', MyComponent)

const element = <MyComponent/>;

console.log('This is an element:', element);

ReactDOM.render(
  element,
  document.getElementById('root')
);

In the code above:

• MyComponent (the class itself) is a Component
• element is an Element. It's not an instance of MyComponent; rather, it's simply a description of the component instance to be created. It's an object with key, props, ref and type properties. Here, key and ref are null, props is an empty object, and type is MyComponent.
• An instance of MyComponent gets created (and, in the example above, logs itself from its constructor) when element gets rendered.
• another_element is also an element, and has key, ref, props and type properties just like element does - but this time the value of type is the string "div".

The design reasons why React has these three distinct concepts are explored in detail in the React team's blog post React Components, Elements, and Instances, which I recommend reading.

Finally, it should be noted that while the official docs are rigorous about using the term "component" to refer to a function or class and "component instance" to refer to an instance, other sources do not necessarily adhere to this terminology; you should expect to see "component" used (incorrectly) to mean "component instance" when reading Stack Overflow answers or discussions on GitHub.

To further elaborate on the answer, a React Element does not have any methods and nothing on the prototype. This also makes them fast.

"A ReactElement is a light, stateless, immutable, virtual representation of a DOM Element" - Glossary of React Terms

A react component render() function returns a DOM tree of react elements behind the scenes (This is the virtual DOM btw). There is some complex mapping and diff logic involved, but basically these React elements map to the DOM elements.

You can also create a Element directly React.createElement(arg) where arg can be a html tag name, or a React Component class.

React Elements

A React Element is just a plain old JavaScript Object without own methods. It has essentially four properties:

• type, a String representing an HTML tag or a reference referring to a React Component
• key, a String to uniquely identify an React Element
• ref, a reference to access either the underlying DOM node or React Component Instance)
• props (properties Object)

A React Element is not an instance of a React Component. It is just a simplified "description" of how the React Component Instance (or depending on the type an HTML tag) to be created should look like.

A React Element that describes a React Component doesn't know to which DOM node it is eventually rendered - this association is abstracted and will be resolved while rendering.

React Elements may contain child elements and thus are capable of forming element trees, which represent the Virtual DOM tree.

React Components and React Component Instances

A custom React Component is either created by React.createClass or by extending React.Component (ES2015). If a React Component is instantiated it expects a props Object and returns an instance, which is referred to as a React Component Instance.

A React Component can contain state and has access to the React Lifecycle methods. It must have at least a render method, which returns a React Element(-tree) when invoked. Please note that you never construct React Component Instances yourself but let React create it for you.