Both produce React elements, but one creates from nothing and the other copies and tweaks an existing element.

React.createElement

React.createElement(type, props, ...children)

Creates a new element from scratch. This is what JSX compiles to — <div className="x">hi</div> becomes React.createElement("div", { className: "x" }, "hi"). You almost never call it directly; you write JSX.

React.cloneElement

React.cloneElement(element, newProps, ...newChildren)

Takes an existing element and returns a copy of it with:

• its original props preserved,
• newProps shallow-merged on top (new values win),
• key and ref overridable,
• children replaced if you pass new ones.

When you actually use cloneElement

The real use case: you receive elements as props.children and need to inject extra props into them without the parent knowing. A classic pattern in compound components:

function RadioGroup({ value, onChange, children }) {
  return React.Children.map(children, (child) =>
    React.cloneElement(child, {              // inject group state into each <Radio>
      checked: child.props.value === value,
      onChange,
    })
  );
}
// <RadioGroup><Radio value="a" /><Radio value="b" /></RadioGroup>

Each <Radio> gets checked/onChange injected even though the consumer didn't pass them.

Key distinctions

The caveat

cloneElement is somewhat of an escape hatch — it creates an implicit contract (the child must accept the props you inject). Modern React often prefers Context or render props over cloneElement for compound components, because they're more explicit. Know cloneElement, but mention the alternatives.

The framing

"createElement builds a new element from a type and props — it's what JSX compiles to, so you rarely call it directly. cloneElement copies an existing element, keeping its original props and shallow-merging new ones on top. The real use is injecting props into elements you received as children — like a RadioGroup passing checked/onChange into each Radio. It works, but it's an escape hatch with an implicit contract; for compound components, Context is often the cleaner modern choice."