Fork me on GitHub
#reagent
<
2015-12-11
>
gabe15:12:26

seeing the same thing

mbertheau17:12:08

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

gadfly36118:12:42

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

mbertheau18:12:02

I understand that simple_smile Why should I prefer []?

gadfly36118:12:57

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

mbertheau18:12:50

Both render the same in many situations.

gadfly36118:12:20

I have a guess as to why

jaen18:12:34

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

jaen18:12:50

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

jaen18:12:05

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

mbertheau18:12:45

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

jaen18:12:52

I think yes

gadfly36118:12:54

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

mbertheau18:12:56

(using re-frame terminology)

jaen18:12:09

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

jaen18:12:17

So the deref will affect only this immediate component

gadfly36118:12:26

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

jaen18:12:02

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.

jaen18:12:44

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

mbertheau18:12:59

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

jaen18:12:10

As I understand it - yes

mbertheau18:12:53

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

jaen18:12:38

The head of the form is not a function

jaen18:12:51

It's just plain hiccup that results in HTML

jaen18:12:06

Basically

jaen18:12:24

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

mbertheau18:12:34

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

mbertheau18:12:57

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

jaen18:12:00

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

jaen18:12:12

[:div "h1"] is not it.

jaen18:12:27

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

jaen18:12:44

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

mbertheau18:12:54

It sounded plausible simple_smile

jaen18:12:54

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.

jaen18:12:07

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.

jaen18:12:53

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

jaen18:12:20

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.

jaen18:12:41

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

jaen18:12:18

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.

mikethompson23:12:41

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

mikethompson23:12:10

[] 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)