Should "component" functions in Om be called directly?

Question

As I'm only starting to fully understand, om.core/build and om.next's factory functions return React element objects, which refer to component functions/classes, and the actual component is only instantiated later by React's reconciler. That is, (om.core/build some-component data) doesn't actually call some-component immediately.

However, we often represent simple, "stateless" components as just functions which take props and return a React element. In the (pure) React world, you'd use one of these functions like a component class, as React.createElement(AStatelessComponent, {some: "props"}), or more conveniently in JSX as <AStatelessComponent some="props" />. Those too return a React element which references AStatelessComponent, which won't actually be called until later.

But in Om, when we have a simple component like this (and by "we" I mean me and my team, at least), we call the function directly. Thus,

(render [this]
  (om/div {}
      (a-stateless-component {:some "data"})))

Here, a-stateless-component is called immediately, and whatever it returns is inserted directly into the div, rather than being substituted later by the React reconciler.

Is there a preferred way to React.createElement in Om? Or is it preferred to just call functions like this directly, even though it skips creating a component instance in the render tree?

Answer 1

In Om, if you want to instantiate a stateless component you need to call js/React.createElement directly.

Why you would want to do that depends:

1. if you call React.createElement you get a "tracked" instance in React's reconciler
2. if you don't, you get inlining but the stateless component now cannot be distinguished from its parent in React's render tree.

EDIT: I just realized that om.next/factory is permissive enough that it allows you to instantiate the stateless components you were talking about. So you can achieve what you want both by calling js/React.createElement directly on a function of props, or by calling om.next/factory with that same function as argument.

Here's a working example. The following code:

((om/factory #(dom/div nil "Hello, World")))

results in the following component (in React's devtools):