React Element Objects

Compiled JSX produces immutable React element objects that describe UI structure. They are lightweight descriptions of what React should render, rather than DOM nodes themselves.

JSX is syntax that is transformed into JavaScript expressions that create React element objects. For example, `<button className="save">Save</button>` represents a request to create an element with a type, props, and children; it does not directly create a browser DOM element.

A React element is a plain, immutable description of UI. Its `type` identifies what should be rendered, `props` contains the supplied properties and children, and React uses this description during rendering and reconciliation.

For intrinsic JSX such as ``, the element's `type` is typically the string `"div"`. For a component such as `<Profile />`, the `type` is the component function or class itself. This distinction lets React determine whether it should create or update a host element or invoke a component.

Element objects should be treated as values rather than mutable UI instances. Changing an element object after creation is not the normal way to update the interface; instead, rendering new elements from updated state or props gives React a new description to reconcile.

Key points

• JSX compiles into JavaScript that creates React element objects.
• An element describes UI; it is not the browser DOM node.
• Core information includes `type`, `props`, and `key` when one is provided.
• Element objects are immutable descriptions and should be treated as values.
• Component elements store the component itself as `type`, while host elements use strings such as `"div"`.

Interview questions

What is a React element?

A React element is a JavaScript object that describes what React should render. It can specify a host type such as `div` or a component type, along with props and children. It is not the same thing as a DOM node. React uses these descriptions when producing and updating the rendered UI.

What does JSX become after compilation?

JSX is transformed into JavaScript expressions that create React elements. Depending on the JSX transform and React setup, this can use functions such as `jsx` or equivalent element-creation APIs rather than the older `React.createElement` form. The resulting value represents the requested element structure. React later consumes that structure during rendering.

How does `` differ from `<MyComponent />` internally?

For ``, the element type identifies a host element using the string `"div"`. For `<MyComponent />`, the type refers to the component function or class represented by `MyComponent`. React uses that type information to determine how the element should be processed. This is one reason capitalization in JSX matters.

Why are React elements considered immutable?

An element represents the result of a particular render description, so it is treated as a fixed value rather than something that is incrementally modified. When application state or props change, rendering normally produces new element objects. React can then compare the new description with the previous one during reconciliation. This model makes UI updates declarative.

What role do `key` values play in React elements?

A `key` gives React an identity hint for elements among siblings, especially when rendering lists. React can use stable keys to correlate elements across renders when their positions change. A key is not generally passed to a component as an ordinary prop. Poor key choices, such as unstable positional values in reorderable lists, can cause incorrect component identity or unnecessary work.