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.

[ericmorand]

It's not just a function that happens to return JSX.

I did not say that - it would make no sense at all since JSX is a language.

Anyway, regardless of that, I think I get your point: a component is either an instance that exposes a render function that returns a VNode, or a function that returns a VNode.

Now that I think about it, the real confusing thing is the type parameter of createElement. 😂

[marvinhagemeister]

Function componets are essentially the .render() method of a class component. In both cases we create a Component instance, see:

preact/src/diff/index.js

Lines 106 to 112 in 504eb5c

	newVNode._component = c = new BaseComponent(
	newProps,
	componentContext
	);
	c.constructor = newType;
	c.render = doRender;
	}

[ericmorand]

So, FunctionComponent are not a Component, right? If preact creates a Component from a FunctionComponent instance, then it means that FunctionComponent is not a component. If it was a component, it would mean that a Component is made of a Component.

Isn't is a ComponentRenderFunction?

Edit: this is not very important. As I said, ultimately, the real issue is the first parameter of createElement that can be a string, a Class or a render function, all gathered around the very generic and semantically vague name type.

Now that you have made clear that a FunctionComponent is only the render function of a component, I'll be able to come with a clear explanation for my students. Thanks a lot.

[marvinhagemeister]

Isn't is a ComponentRenderFunction?

Sorta yeah, but also no. Think of it this way. Class components were there first. The point of components is to be able to:

• have state
• be able to trigger lifecycle functions ("when this component mounts, do this" or "when this component is removed, do that"
• render UI

If you look at a function component together with hooks, they allow you to:

• have state
• be able to trigger lifecycle functions (useEffect, etc)
• render UI

So they both allow you to achieve the same goal. Now here is the thing. With React, a class components .render() method cannot be stateful. It must be a pure function in React to work. So conceptually a render function is different from a class component.

The thing is in Preact it technically works. We kinda break that concept and a class component's render method can be stateful if you're using hooks inside them. We definitely don't encourage that and keep it more as a fun fact, because this is merely a side effect of how we've implemented function components in Preact.

[ericmorand]

Thanks for the further clarification. This is much appreciated.