React Element

A React Element is the minimum building unit of UI in React: a simple immutable object that describes exactly what needs to be rendered.
It is not a DOM node or a component — it is a declarative instruction from which React forms the Virtual DOM and Fiber tree.

Essence of a React Element

• Represents the interface structure as an ordinary JavaScript object.
• Created via JSX or React.createElement().
• Is immutable — any UI update creates a new element.
• Describes:
  • node type (div, Component)
  • props
  • child elements
  • key (key)
  • reference (ref)

React Element Structure

{   
  $$typeof: Symbol(react.element),   
  type: 'h1',   
  key: null,   
  ref: null,   
  props: {     
    className: 'title',     
    children: 'Hello'   
  },   
  _owner: null 
}

Main fields:

• type — what element to create: a DOM tag or a component.
• props — data, children, attributes.
• key — identification of elements in lists.
• ref — access to the real DOM or component instance.
• $$typeof — a React internal field for type checking.

Why elements are immutable

-- Immutability allows React to quickly compare old and new trees.

• Any UI change ⇒ a new React Element is created.
• React determines if an update is needed only by changing references, rather than deep comparison.
• This makes reconciliation simpler and more performant.

Key ideas

• React Element = declarative description of UI, not the DOM.
• Immutability of elements is the basis for fast diffing.
• Elements are input data for Virtual DOM and Fiber.
• Changing elements triggers the render process and minimal updates to the real DOM.