What is the difference between a React Element and a React Component?
Two related concepts that often get confused.
React Element — a plain JavaScript object describing what to render: the type, props, and children. Cheap to create, immutable, and represents a single point in time. Produced by JSX or
React.createElement.
React Component — a function or class that takes props and returns one or more elements. Reusable, parameterizable, and can hold state.
Component → Element — calling a component (rendering it) produces elements that React renders to the DOM.
Elements are immutable — you don't modify them; you create new ones via re-renders.
Naming convention — components must start with a capital letter (
MyButton); lowercase names are treated as HTML tags.Mental model — component is the recipe; element is the order placed at one moment.
// React Element (plain object)
const element = <h1>Hello</h1>;
// Equivalent to: { type: 'h1', props: { children: 'Hello' } }
// React Component (function that returns elements)
function Greeting({ name }) {
return <h1>Hello, {name}!</h1>;
}
// Using the component produces an element
const greetingElement = <Greeting name="World" />;
// { type: Greeting, props: { name: 'World' } }
// React recursively resolves components to DOM elements:
// <Greeting name="World" />
// -> Greeting({ name: 'World' })
// -> <h1>Hello, World!</h1>
// -> { type: 'h1', props: { children: 'Hello, World!' } }The element is a simple object describing a DOM node. The component is a function that returns elements.
When React renders <Greeting />, it calls the function and gets back an <h1> element. React continues resolving until all elements have plain string types (DOM elements).
The recipe/dish analogy works well. Key point: elements are immutable objects describing the UI, components are functions that create elements.
This is a fundamental concept that shows understanding of React's rendering model.