✅ What Is `React.createElement`?

React.createElement is the core, low-level API React uses to create a React element—an immutable JavaScript object that describes what the UI should look like.

It does not create real DOM nodes. Instead, it returns a plain object that React later compares, diffs, and translates into actual DOM updates during the reconciliation process.

Most developers don’t write React.createElement directly because JSX compiles into it automatically. Still, understanding it is essential if you want to truly understand how React renders UI under the hood.

🚀 Syntax

React.createElement(type, props, ...children);

🧠 Parameters Explained

Parameter	Description
`type`	A string (`'div'`, `'span'`) for DOM elements, a React component (function/class), or special values like `React.Fragment`.
`props`	An object of attributes and properties. Can be `null`. Special props like `key` and `ref` are handled separately.
`...children`	Any number of children—strings, numbers, React elements, arrays, `null`, or `false`. These become `props.children`.

🔧 Example 1: JSX vs `createElement`

// JSX
const element = <h1 className="greeting">Hello World</h1>;

// Without JSX
const element = React.createElement(
  "h1",
  { className: "greeting" },
  "Hello World"
);

✔ Both snippets generate the same React element object internally.

🔄 Example 2: Nested Elements

const list = React.createElement(
  "ul",
  null,
  React.createElement("li", { key: "a" }, "Item A"),
  React.createElement("li", { key: "b" }, "Item B")
);

This produces a <ul> with two <li> children—no JSX involved.

🧩 Example 3: Creating a Component Element

function Avatar({ name }) {
  return React.createElement("img", { alt: name });
}

const element = React.createElement(Avatar, { name: "Sam" });

Here, Avatar is a React component.
createElement creates its element descriptor, not the rendered output.

📦 Example 4: Using `React.Fragment`

const fragment = React.createElement(
  React.Fragment,
  null,
  React.createElement("span", null, "One"),
  React.createElement("span", null, "Two")
);

Fragments let you return multiple children without adding extra DOM nodes.

🔁 Relationship with JSX

JSX is not HTML—it’s syntax sugar that gets compiled into function calls.

// JSX
<button>Click Me</button>

// Compiled (classic runtime)
React.createElement("button", null, "Click Me");

⚡ Modern JSX Transform (React 17+)

With the new JSX runtime, JSX compiles to:

jsx("button", { children: "Click Me" });

This is why importing React is no longer required just to use JSX.

🔑 Special Props: `key` and `ref`

key → Helps React track list items efficiently during reconciliation
ref → Provides access to DOM nodes or component instances

⚠️ These are not passed via props—React extracts them and attaches them directly to the element object.

⚠️ Important Notes

React.createElement does not create DOM nodes (unlike document.createElement)
React elements are immutable—never mutate them
JSX is preferred for readability, but createElement is the foundation underneath

📌 When Should You Use `React.createElement`?

When working without JSX (build-less or constrained environments)
When writing React utilities or libraries
For learning, debugging, or understanding React internals
In advanced dynamic rendering scenarios

🧾 Final Thoughts

React.createElement is the bedrock of React’s rendering system. Every JSX expression ultimately becomes a call to this function (or its modern equivalent).

While JSX makes React ergonomic and readable, understanding createElement gives you a mental model of how React turns your code into predictable, efficient UI updates—a crucial skill for advanced React development.

React.createElement Explained: The Core of JSX in React