What is the difference between Element and Component in React

React Elements:

1) A React Element is what gets returned from components. It’s an object that virtually describes the DOM nodes that a component represents.
2) With a function component, this element is the object that the function returns.
3) With a class component, the element is the object that the component’s render function returns. R
4) React elements are not what we see in the browser. They are just objects in memory and we can’t change anything about them.
5) React elements can have other type properties other than native HTML elements.
6) A react element describes what we want to see on the screen.
7) A React element is an object representation of a DOM node.
8) It’s important to make this distinction here because the element is not the actual thing we see on the screen, rather the object representation is what is rendered.
9) A react component render() function returns a DOM tree of react elements behind the scenes (This is the virtual DOM btw). There is some complex mapping and diff logic involved, but basically these React elements map to the DOM elements.

React Components:

1) A component is a function or a Class which optionally accepts input and returns a React element.
2) A React Component is a template. A blueprint. A global definition. This can be either a function or a class (with a render function).
3) If react sees a class or a function as the first argument, it will check to see what element it renders, given the corresponding props and will continue to do this until there are no more createElement invocations which have a class or a function as their first argument.
4) When React sees an element with a function or class type, it will consult with that component to know which element it should return, given the corresponding props.
5) At the end of this processes, React will have a full object representation of the DOM tree. This whole process is called reconciliation in React and is triggered each time setState or ReactDOM.render is called.
6) React Element does not have any methods and nothing on the prototype. This also makes them fast.
7) A ReactElement is a light, stateless, immutable, virtual representation of a DOM Element
8) You can also create a Element directly React.createElement(arg) where arg can be a html tag name, or a React Component class.

Class-Based Components:
1) Class syntax is one of the most common ways to define a React component. While more verbose than the functional syntax, it offers more control in the form of lifecycle hooks.
2) We can render many instances of the same component.
3) The instance is the “this” keyword that is used inside the class-based component.
4) Is not created manually and is somewhere inside React’s memory.

Function-Based Components:
1) Do not have instances.
2) Can be rendered multiple times but React does not associate a local instance with each render.
3) React uses the invocation of the function to determine what DOM element to render for the function.