Elements vs. Components

A Component is the factory. An Element is the product it builds.

React3 min readConcept 3 of 46

What they are

An **Element** is a plain JavaScript object describing what you want to see on the screen. It is lightweight, immutable, and has no methods. It looks like this under the hood: { type: 'button', props: { className: 'blue' } }.

A **Component** is a function (or class) that optionally accepts inputs (props) and returns a React Element. It is the blueprint or factory that produces Elements.

Why it matters

Confusing the two leads to fundamentally broken React applications. When you write <MyButton /> in JSX, you are creating an *Element* that tells React to execute the MyButton *Component* later.

If you treat a Component like a regular function and call it directly (e.g., MyButton()), you bypass React's lifecycle and hook system entirely. React won't know the component exists.

How they interact

When React renders your app, it calls your Components to ask them what they want to display. Your Components return a tree of Elements.

React then takes that tree of Elements, compares it to the previous tree (reconciliation), and updates the real DOM to match.

The Factory and the Product

Watch how a single Component (the factory) produces multiple distinct Elements (the products) to form the UI tree.

// The Component (The Factory)
function Button({ label }) {
return <button className="btn">{label}</button>;
}
 
// Creating Elements (The Products)
const App = () => (
<div>
<Button label="Save" />
<Button label="Edit" />
<Button label="Delete" />
</div>
);

Button Component

The reusable blueprint (function)

React Element
{
type: "button",
props: {
className: "btn",
children: "Save"
}
}
React Element
{
type: "button",
props: {
className: "btn",
children: "Edit"
}
}
React Element
{
type: "button",
props: {
className: "btn",
children: "Delete"
}
}

The Component is called once per instance, producing a unique immutable Element object each time.

Check yourself

Pick an answer to lock it in, then read why. Getting one wrong is part of how it sticks.

  1. 1What is a React Element?
  2. 2Why shouldn't you call a Component like a standard function (e.g. `const ui = MyComponent()`)?
  3. 3How does React know whether `<Foo />` is a DOM node or a custom Component?

Remember this

  • A Component is a function. An Element is the object it returns.
  • Never call components directly as functions (MyComponent()); always use JSX (<MyComponent />).
  • Capitalize custom Components; use lowercase for standard DOM elements.

Done with this concept?

Mark it complete to track your progress. No login needed.