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

Answer 1

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.