easyPhone Screen

What is the difference between element and component in React?

Q: What is the difference between element and component in React?

**Core concept (TL;DR).** A **component** is a function (or class) that returns UI — the reusable blueprint. An **element** is the plain, immutable object that a component (or JSX) *produces* to describe what should appear on screen. You write components; React works with the elements they return. Component (factory) → element (description) → DOM Component <text x="90" y="93" fill="currentColor" font-s

656 views

Understand the problem

Distinguishing the template definition from the actual instanced visual node.

conceptsarchitecture

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

Read the code

A component returns elements

// Button is a COMPONENT (a function)
function Button({ label }) {
  return <button>{label}</button>;   // returns an ELEMENT
}

export default function App() {
  // <Button .../> creates an element: { type: Button, props: { label } }
  const el = <Button label="Click me" />;
  console.log(typeof el, el.type === Button); // "object" true
  return (
    <div style={{ padding: 24, fontFamily: "system-ui" }}>
      {el}
      <Button label="Another" />
    </div>
  );
}

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

What is JSX?

What are fragments in React?