Shouldn't `FunctionComponent` be named `ComponentFactory`?

[ericmorand]

I'm currently teaching React to some students, from the bias of the library instead of the bias of the JSX language.

One of the thing that they had a hard time understanding was the distinction between a Component and a Component Type. Which I think is understandable.

For example, in this page:

https://preactjs.com/guide/v10/components#functional-components

function MyComponent(props) {
	return <div>My name is {props.name}.</div>;
}

// Usage
const App = <MyComponent name="John Doe" />;

Here, MyComponent is not a component: it is a Component Type - aka a factory that, when executed, returns a Virtual Node - the component itself.

This is confirmed by the signature of createElement:

export function createElement<P>(
	type: ComponentType<P> | string,
	props: (Attributes & P) | null,
	...children: ComponentChildren[]
): VNode<P>;

Without any doubt, createElement expects its first parameter to be a Component Type (or a string).

The example given above would look like this when using createElement:

function MyComponent(props) {
    return createElement("div", {}, `My name is ${props.name}`);
}

// Usage
const App = createElement(MyComponent, {name: 'John Doe'});

Which means that MyComponent is a Component Type.

Now, this is where it gets really confusing: the ComponentType type is the union of ComponentClass and FunctionComponent. ComponentClass conveys the fact that it is a factory that returns a component. But the type FunctionComponent does not: it actually means "a function that acts as a component", which does not make sense since a component is a Virtual Node, not a function.

I was wondering where the naming rational was coming from and if I'm missing something. To make things understandable to my students, I had to explain to them that the naming FunctionComponent was a naming mistake, and that it actually means ComponentFactory.

But I'm myself still confused about why it was named FunctionComponent to begin with.

Where is it coming from? What was the rational behind the naming choice? And would it be accepted if I propose a PR that adds ComponentFactory as an alias to FunctionComponent, just like FunctionalComponent was added as an alias at some point?

[marvinhagemeister]

function MyComponent(props) {
	return <div>My name is {props.name}.</div>;
}

// Usage
const App = <MyComponent name="John Doe" />;

Here, MyComponent is not a component: it is a Component Type - aka a factory that, when executed, returns a Virtual Node - the component itself.

Not quite. Under the hood it get's the same component instance as class components. It's not just a function that happens to return JSX. It's much more than that.

The easiest way to demonstrate that is with hooks. Most of them rely on some form of storage being associated with the current component. That something needs to be stored somewhere for which we use the same component instance as for class components.