Given that a React component is essentially a function:
const Component = ([props]) => React.createElement(type[, props [, ...children]]);
when I try to call it as any normal function:
Component([props]);
it doesn't work.
Meanwhile, in the React documentation it is called like this:
React.createElement(Component([props]));
How can a component, be used as a type property? Because normally, a type is a string, not a function.
It may not throw an error (though it would if you used hooks), but it won't work correctly in the general case. (It might sort of work if your function is stateless and returns the result of calling
createElement.)React doesn't call your component function when you pass it to
createElement, it just creates and returns a React Element object that stores the function along with the element's props and children:React calls the function later, if you use that element (and never if you don't use it). Usually it's more than once, because most elements are rendered more than once, and the function is caled for each render (unless you
memoize it and the memo function says the result would be the same as last time). So the function may be called never (if the element is never used), or repeatedly (if the element is used and ever re-rendered).Separately, React sets up some internal things at its end before calling your function, so that if your function uses hooks, it knows where to store the hook information. If you call a function that uses hooks directly, the hooks throw an error because that context isn't set up.
Here's a simple example (using
createElementdirectly rather than via JSX, since your question mentionedcreateElementspecifically):