React Node vs Element vs Component

A component is the function. An element is the object that function call produces. A node is anything React can render, which includes elements and also strings, numbers, arrays, null and undefined.

function Button(props) { ... }   // component — a function (a blueprint)

const el = <Button />;           // element — a plain object describing what to render
// { type: Button, props: {}, key: null }

// all of these are valid nodes:
'text'    42    null    false    <Button />    ['a', <Button key="b" />]

So the relationship is: node ⊇ element ⊇ what a component produces.

Why the distinction matters in practice

An element is not a rendered thing. Creating <Button /> does not call Button. It builds an object and hands it to React, which decides when and whether to call the function. That is why you can create an element and never render it, and why elements are cheap.

<Button />        // an element, immutable, describes intent
Button()          // calling it yourself — loses hooks, state, and reconciliation

Elements are immutable. You never mutate one; a render produces new ones. This is what makes the diff possible.

The names show up in your types. In TypeScript the difference is load-bearing:

type Props = {
  children: React.ReactNode;        // anything renderable — use this for children
  icon: React.ReactElement;         // must be an element, e.g. <Icon />
  Component: React.ComponentType;   // the function itself, to render later
};

Typing children as ReactElement rejects a plain string, which is almost never what you want. And a prop that takes a component to render later — <Route component={Home} /> — is a ComponentType, not an element.

The terms around them

• Instance — for function components there is no user-visible instance. State lives in React's internal fibre, which is why useState exists and this does not.
• Fragment — an element whose type lets you return several children without a wrapper: <>...</>.
• React.createElement(type, props, ...children) is what JSX compiles to, so JSX is only syntax over building these objects.

A useful sanity check

console.log(<Button a={1} />) prints an object with type, props and key — no DOM, no output. Seeing that once makes the whole distinction obvious: components are code, elements are data, nodes are whatever React is willing to accept.