seeing the same thing

With only form-1 components without arguments, does it matter whether I use them with () or []?

Use []

Why?

Because it will return a react component, whereas calling it with () will return a vector of hiccup

I understand that Why should I prefer []?

Ahh, because a react component will render what you'd expect to the DOM, but a vector of hiccup wont

Both render the same in many situations.

I have a guess as to why

If you don't have arguments and don't dereference any ratoms in a component it amounts to the same outcome I suppose.

But as soon as you have arguments or ratom dereferences it starts to behave differently.

So I guess it's just a question of consistency.

@jaen Interesting. What if I subscribe and deref in the form-1 function? Does it make a difference then?

I think yes

If you have a component called with [] and nested inside you have calls with () of subcomponents, it will appear to work

(using re-frame terminology)

If you use [] reagent will build a React component as mentioned

So the deref will affect only this immediate component

But what is happenijg is the top level os converted to a react component and the inner ones arent.

If you will call it with () then that hiccup gets put into the calling component and it will all re-render when the dereffed ratom changes.

So using () you will be doing re-rendering more than otherwise.

So if I call g inside f, and g derefs, f will re-render everytime the atom changes, right?

As I understand it - yes

Yeah

Hmm, ok. Is [:div "hi"] turned into a react component as well?

It's explained quite nicely here - https://github.com/Day8/re-frame/wiki/Using-%5B%5D-instead-of-%28%29

No

The head of the form is not a function

It's just plain hiccup that results in HTML

Basically

(function ...) is a normal Clojure function call that will be evaluated when it's called.

I read that. It doesn't say that [:div] is not turned into a react component, or did I miss that somewhere?

It also doesn't say the opposite, so it really doesn't say anything about that question, if I read the page correctly.

Basically, anything of form [function ...] will be turned into a react component.

[:div "h1"] is not it.

(maybe, but it answers the question about how this behaves wrt. rendering, as I described before)

Though actually now I think about that, I'm not sure if I got that exactly right.

It sounded plausible

In plain react, without JSX, you write HTML using React.createElement (which creates components), so in the end yes, even [:div "h1"] is a component.

But the difference is when you do (function ...) you evaluate your component function right when it is encountered, in the normal strict evaluation Clojure fashion.

with [function ...] this is evaluated lazily by reagent and it creates components when needed.

I didn't test, but I suspect if you tried to call a form-2 component with (function ...) it would break, since it returns not hiccup, but a function.

So think about it as copy&pasting component's content vs. actually creating a reusable component.

Sometimes the first might be what you want (I did a simple form library for myself and doing that for fields worked okay), other times - not.

So, given the discussion above, what should I add to that doc about () and [] which would help to make things more clear?

[] results in a distinct React Component with its own lifecycle. (Eg: it won't rerender unless props change). () is just a function call which returns something (hiccup in this case)