What is the difference between Element and Component in React?

In React, elements and components are the building blocks for your user interface, but they serve different purposes:

Element

A plain object describing what you want to see on the screen.
Think of it as a blueprint for a UI element.
Contains properties like:

• type: The type of element, like an HTML tag (div, p, etc.) or a custom component.
• props: Additional attributes to customize the element (e.g., text content, styling).
• Immutable: Once created, an element's properties cannot be changed.
• Simple and lightweight.

Component

A reusable piece of code that defines how a part of your UI looks and behaves.
Can be a function or a class.

• Takes input through props (similar to element props) and optionally manages its own internal state.
• Returns a React element describing the UI it represents. This element is then used by React to update the DOM.
• Can have lifecycle methods that respond to events like creation, updates, or destruction.
• More complex and powerful than elements.

Analogy:

• Think of elements as Lego bricks. They are the individual pieces that come in various shapes and colors.
• Components are like Lego instructions. They tell you how to assemble the bricks to create a specific structure (a car, a house, etc.).

Here are code examples illustrating elements and components in ReactJS:

Element:

// Element representing a heading:
const myHeading = <h1>Welcome to my React app!</h1>;

// Rendering the element to the DOM:
ReactDOM.render(myHeading, document.getElementById('root'));

Component:

// Functional component:
function WelcomeMessage(props) {
  return <h2>Hello, {props.name}!</h2>;
}

// Class component:
class Greeting extends React.Component {
  render() {
    return <h3>Greetings, {this.props.user}!</h3>;
  }
}

// Using the components:
ReactDOM.render(
  <div>
    <WelcomeMessage name="Bob" />
    <Greeting user="Alice" />
  </div>,
  document.getElementById('root')
);

Key points:

• Elements are simple objects, often created using JSX, describing UI parts.
• Components are reusable code blocks that can return elements, manage state, and handle events.
• Functional components: Just a JavaScript function returning elements.
• Class components: Extend React.Component with lifecycle methods for deeper control.
• Props: Pass data to components for customization.

In summary:

Elements are the what (the UI structure).
Components are the how (how to render the UI and manage its behavior).

More info:
ReactJS Interview Questions
Passing data in React