What is the difference between a React Element and a React Component?

Question

Accepted Answer

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 &rarr; 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. 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.