React Elements

Introduction

You have written JSX and seen it compile down to React.createElement() calls. But what does React.createElement() actually return? Understanding the answer clears up a lot of confusion about how React works — and about the difference between an "element" and a "component," two words that sound similar but mean very different things.

This lesson looks at what a React element really is, how it differs from a component, why elements cannot be changed once created, and how React finally turns them into real, visible DOM nodes on the page.

What Is a React Element?

A React element is not a real DOM node, and it is not anything drawn on screen by itself. It is a plain, lightweight JavaScript object that describes what should appear on screen — a tag name, its props, and its children, nothing more.

const heading = <h1 className="title">Hello, React!</h1>;

const heading = {
  type: "h1",
  props: {
    className: "title",
    children: "Hello, React!"
  }
};

{ type: "h1", props: { className: "title", children: "Hello, React!" } }

That is genuinely all an element is — a description, like a blueprint or a photograph of what one piece of UI should look like at this moment. React reads these objects to figure out what the real DOM should contain; the objects themselves never touch the browser directly.

Elements vs Components

It is easy to use "element" and "component" interchangeably at first, but they are different layers. A component is a JavaScript function (or class) that you write; an element is the plain object that a component returns when it runs.

function Greeting() {
  // This function is the component.
  return <h1>Hello, React!</h1>; // This JSX becomes the element it returns.
}

In short: you write components, and components produce elements. Every time a component runs, it creates a brand-new element (or tree of elements) describing what should currently be on screen.

Elements Are Immutable

Once a React element has been created, you cannot change its props or children — it is immutable, just like a number or a string in JavaScript. There is no method to update an existing element in place; instead, React creates an entirely new element to represent any updated UI.

const element = <h1>Count: 0</h1>;

// element.props.children = "Count: 1"; // ❌ Not how React works — this has no effect on the UI

// Instead, a component re-runs and creates a brand-new element:
function Counter({ count }) {
  return <h1>Count: {count}</h1>; // ✅ A new element is created every render
}

This is exactly what happens whenever state changes: the component function runs again and returns a new element describing the updated UI. React then compares this new element against the previous one (the diffing process from the Virtual DOM) and updates only what actually changed in the real DOM.

Rendering Elements to the DOM

On their own, elements are just JavaScript objects sitting in memory — they do nothing until React is told to render them. That is the job of createRoot().render(), which you saw earlier in main.jsx.

import { createRoot } from 'react-dom/client';

const element = <h1>Hello, React!</h1>;

createRoot(document.getElementById('root')).render(element);

<div id="root">
  <h1>Hello, React!</h1>
</div>

createRoot() connects React to a real DOM node (here, the element with id "root"), and .render() takes an element — or, in practice, an entire component like <App /> — and walks its description to create and insert the matching real DOM nodes. Every future update follows the same idea: a new element tree is created, and React updates the real DOM to match it.

Common Mistakes

Best Practices

Frequently Asked Questions

Key Takeaways

Summary

Underneath every piece of JSX you write is a simple, immutable JavaScript object — the element. Components are the functions that produce these objects, and React's job is to read them and keep the real DOM in sync. This distinction between components, elements, and the real DOM is one of the most important mental models in all of React.

In this lesson, you learned what a React element actually is, how it differs from a component, why elements are immutable, and how createRoot().render() turns an element into real DOM nodes. Next, you will start building components of your own in depth.