React Element vs React Component

Hey there,

Most of the developers would be using the React in their projects, but we often ignore the small things that sometimes may need to have a deep insight to understand.

One of the such concepts for React is React Elements, and Component differences.

Let us see the differences between them:

React Element:

React Element is an object which has the information about the type of react element, and the props that, it can hold and the children.

let us say we have an react element whose tag is 'h1', and the text between the tag would be "Hello world". In this scenario the React element which is said an object earlier would be represented as below:

This is the representation would be stored in the react tree

const reactElement = {
 type: 'h1',
 null,
 'Hello world',
};

To create that react element we would use createElement API of react as below:

React.createElement('h1', null, 'Hello world');

and same can be created using JSX:

<h1>Hello world</h1>

Now let us say we have to create the same above element multiple places and we have such multiple usages. In such case we can create the function and keep the JSX in that function. so whenever we need we can call that function to have the same element.

const renderElement = text => {
  return (
     <h1>
       {text}
     </h1>
  );
};

since the above function returns the JSX we can call that function whenever we need in JSX

the usage of that function would be as below:

{renderElement("text1")}
{renderElement("text2)}

we can also pass the renderElement function to the createElement API to create reactElements

React.createElement(renderElemet, null, 'Hello world');

But what we cannot do with the renderElement function is we cannot use the renderElement as tag which we did for div tag as shown below:

for a div tag you could have done this

Vanilla JavaScript

const element1 = React.createElement('div', null, 'Helloworld');

JSX

<div>
 Hello world
</div>

const element2 = React.createElement(renderElement, null, 'Hello World');

but you cannot use the element as JSX

In order to use that function as tag, the name should be start with capital letter, and such functions are called components.

const CustomComponent = ({ children }) => {
return (
 <h1>
   {children}
</h1>
);

this CustomComponent can be used as tag, or also rendered with React API as shown below:

Vanilla JS:

const element3 = React.createElement(CustomComponent, null, 'Hello world');

JSX:

<CustomComponent>
  <h1>
   Hello world
  </h1>
</CustomComponent>

These Components also have access to the special variables within the scope of the Class, and functions called state which holds the values and the React elements can be re-rendered whenever these values are updated.