¿Cuál es la diferencia entre Elemento y Componente en React?

Un Elemento (Element) es un objeto plano describiendo lo que quieres que aparezca en la pantalla en términos de nodos del DOM u otros componentes. Los elementos pueden contener otros elementos en sus propiedades.

Crear un React Element es muy barato. Una vez que es creado, este nunca muta.

La representación de un elemento es algo así:

const element = React.createElement('button', { id: 'btn' }, 'Sign In');

El código de arriba retorna un objeto:

{
  type: 'button',
  props: {
    children: 'Sign In',
    id: 'btn'
  }
}

Y lo renderiza usando ReactDOM.render() es esto:

<button id="btn">Sign In</button>

A diferencia del Elemento, un Componente puede ser declarado en diferentes maneras. Puede ser una clase con el método render() o puede ser definido como una función. En cualquier caso, este toma props como entrada y retorna un JSX como salida.

const Button = ({ onSignIn }) => {
  return (
    <button id="btn" onClick={onSignIn}>
      Sign In
    </button>
  );
};

Luego JSX se transpila a un árbol de funciones de React.createElement().

const Button = ({ onSignIn }) =>
  React.createElement('button', { id: 'btn', onClick: onSignIn }, 'Sign In');

Y esas son las diferencias en un Element y un Component en React.