Understanding React Elements Once and for All

In JavaScript, there's nothing mysterious about functions. You define one:

function multiply(a, b) {
  return a * b
}

And you invoke it:

multiply(3, 4)

Definition vs. invocation. Simple.

Now consider a React component:

function UserCard() {
  return <section>User</section>
}

And its usage:

<UserCard />

What exactly is this called?

Most answers people give are technically incorrect:

• •Instantiating a component
• •Rendering it
• •Evaluating it
• •Invoking it
• •"Using" it

None of these describe what actually happens.

To understand why, we need to zoom out and examine how React processes your code before the browser ever sees it.

The Browser Does Not Understand JSX

JSX is not valid JavaScript. You write:

<UserCard />

…but the browser cannot run that directly.

Historically, we've handled this by compiling non-native syntax — TypeScript, Elm, CoffeeScript — into plain JavaScript. JSX follows the exact same rule.

So what does JSX compile to?

Enter React Elements

React defines an element as:

A plain JavaScript object that describes what you want to see in the UI.

It is not a DOM node.

It is not a component instance.

It is a description.

For example, an element might look like this:

{
  type: "button",
  props: {
    children: "Save",
    disabled: false
  }
}

Which corresponds to this UI:

<button>Save</button>

React stores these element objects. When an element changes, React knows exactly which part of the DOM should update.

The jsx Function From react/jsx-runtime

Let's look at what JSX compiles into. Consider:

<Button disabled={false}>Save</Button>

This becomes something like:

import { jsx } from "react/jsx-runtime"

const element = jsx("button", {
  disabled: false,
  children: "Save"
})

The jsx function takes:

• •A type (like "button" or a component function)
• •A props object

And returns a React element object.

Nothing is rendered.

Nothing is mounted.

This function purely creates an object.

Components Are Just Functions That Return Elements

React components aren't magical. They are just functions:

function Alert({ message }) {
  return <p role="alert">{message}</p>
}

If we rewrite this without JSX:

import { jsx } from "react/jsx-runtime"

function Alert({ message }) {
  return jsx("p", {
    role: "alert",
    children: message
  })
}

Again: the result is a React element object.

Passing Components to jsx

You can use components as the type argument:

const cardElement = jsx(ProfileCard, {
  name: "Alex Rivera",
  status: "online",
})

When React sees that the type is a function, it will call it and recursively build a full tree of React elements until everything is a description of the UI.

This is how React resolves your component tree into a set of element objects.

JSX Is Just Better Syntax

Writing:

<ProfileCard name="Alex" />

is far more pleasant than:

jsx(ProfileCard, { name: "Alex" })

But they mean the same thing. JSX is a layer of convenience over React's element creation API.

Back to the Big Question

If this is a function definition:

function multiply(a, b) { ... }

and this is a function invocation:

multiply(2, 5)

and this is a component definition:

function UserCard() { ... }

then what is this?

<UserCard />

Here is the correct answer:

Not rendering.

Not instantiating.

Not invoking.

It is simply the JSX syntax that, when compiled, becomes a call to jsx, which returns a React element object.

All of these create React elements:

<Dashboard />

<div className="wrapper">Content</div>
jsx(Avatar, {
  size: "large",
  url: "https://example.com/photo.png"
})

Same output. Same underlying mechanism.

Components Aren't the Foundation. Elements Are.

React components are functions.

React elements are the objects that describe what those functions produce.

React compares these element objects to understand what the DOM should look like.

Once you internalize that React elements — not components — are the fundamental building blocks of a React application, everything else starts to click: re-rendering, reconciliation, memoization, and how React "decides" what actually changes in the UI.