Difference between React Component and React Eleme

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.

Answer 2

A component is a factory for creating elements.

Answer 3

React components are mutable while elements are not

Answer 4

React Element - It is a simple object that describes a DOM node and its attributes or properties you can say. It is an immutable description object and you can not apply any methods on it.

Eg -

<button class="blue"></button>

React Component - It is a function or class that accepts an input and returns a React element. It has to keep references to its DOM nodes and to the instances of the child components.

const SignIn = () => (
  <div>
   <p>Sign In</p>
   <button>Continue</button>
   <button color='blue'>Cancel</button>
  </div>
);

Answer 5

Elements are thunks.

React lets you define UIs as pure functions defined on application state. It could implement this by computing the entire UI during each state change, but this would be expensive. Elements are computational descriptions (thunks), and if they don't change, and you're using PureComponents, React won't bother recomputing that subtree.