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 Componentelement
is an Element. It’s not an instance ofMyComponent
; rather, it’s simply a description of the component instance to be created. It’s an object withkey
,props
,ref
andtype
properties. Here,key
andref
arenull
,props
is an empty object, andtype
isMyComponent
.- An instance of
MyComponent
gets created (and, in the example above, logs itself from its constructor) whenelement
gets rendered. another_element
is also an element, and haskey
,ref
,props
andtype
properties just likeelement
does – but this time the value oftype
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.