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 element

Answer 1

An element is a plain object describing what you want to appear on the screen in terms of the DOM nodes or other components. Elements can contain other elements in their props. Creating a React element is cheap. Once an element is created, it is never mutated. The object representation of React element would be as follows,

const element = React.createElement(
  'div',
  {id: 'login-btn'},
  'Login'
)

The above createElement returns as object as below,

{
  type: 'div',
  props: {
    children: 'Login',
    id: 'login-btn'
  }
}

And finally it renders to the DOM using ReactDOM.render as below,

<div id='login-btn'>Login</div>

Whereas a component can be declared in several different ways. It can be a class with a render() method. Alternatively, in simple cases, it can be defined as a function. In either case, it takes props as an input, and returns an element tree as the output. JSX transpiled as createElement at the end.

function Button ({ onLogin }) {
  return React.createElement(
    'div',
    {id: 'login-btn', onClick: onLogin},
    'Login'
  )
}

Answer 2

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.

Answer 3

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 4

A React Element is what you would consider to be a basic html(dom to be precise) element. It is just a way of creating element without using the much controversial jsx format.

A React Component is what you can consider as an object. It has its methods, supports React lifecycles and is generally unreusable (at least haven't found any reuse yet, welcome to examples). It necessarily needs to have a render function.

A React Class is what you call a class. Functionality wise React Class and React Component are same. Only syntax is the real change, as React Component is based on ES6 syntax. Another major change is the default binding of functions to this is no longer supported unless using arrow functions. Mixins also are no longer supported as of ES6.

Answer 5

A component is a factory for creating elements.

Answer 6

React components are mutable while elements are not