Element  

Component It is an object describing what you would like to project on the screen in terms of the DOM nodes or other components. It is a function or class that accepts an input and returns a React element.  

It contains other elements in its props.  

It can be a class with a render() method.  

It describes what we want to see on the screen  

It is a template. A blueprint. A global definition.  

It is an immutable description object and you can not apply any methods on it  

It has to keep references to its DOM nodes and to the instances of the child components.  

There is no any method used.  

The lifecycle method is used for each element.  

They are immutable i,e once created cannot be changed.  

The state in a component is mutable.  

React Hooks cannot be used with elements as elements are immutable.  

React hooks can be used with both functional and class components  

Elements are faster.  

Components are slower.  

It is an object representation of a DOM node.  

It is an object representation of the DOM tree.  

e.g,
<button class=”white”> </button>

  e.g,

const LogIn = () => (

<div>

<p> Login </p>

<button> Continue </button>

<button color = “orange”> Cancel </button>

</div>

);