Unecessary component creation with reagent? about reagent HOT 8 CLOSED

No, the extra components are necessary. Reagent does all its bookkeeping by wrapping native React components, so that it can avoid unnecessary re-renderings etc.

React components are extremely cheap, they're are nothing like DOM elements in terms of cost. And they're especially cheap if they only have one child.

The missing feeling of "snappiness" might be caused by my example's use of on-mouse-up in the input field, rather than on-mouse-down. I've pushed that change to http://holmsand.github.io/reagent/ – check it out and see if it feels better.

from reagent.

This must have done the trick, feels snappy to me now. Thanks.

from reagent.

Always nice when you can add snappiness simply by changing "up" to "down" :)

from reagent.

I don't think this explains it, because I don't even use the mouse to add TODOs. Anyway, never mind, it seems to be OK now....

from reagent.

Oh, I meant on-key-down, but my fingers didn't listen to my head... See b1bec33

from reagent.

Hmm. But, even if it has a negligible performance impact (it still has an impact on diffing right?), it does make navigating the React tree through the react-plugin on chrome a little bit annoying. I don't know if this is that big of a deal (I don't use the react-plugin that much, but when I do, it's a bit annoying to navigate a tree twice as long as the html), but it's worth keeping in mind.

from reagent.

No, it does not affect diffing (React diffs one level in the component tree at a time, and there'll be the same amount of components at each level – and the single-child wrapper components that Reagent adds obviously don't need any fancy diffing).

The overhead should instead only be noticeable on the very first rendering – but as I said, it ought to be small.

The big win of this design, is that it fits very well into React's basic model: Reagent components are just normal React components, as far as React is concerned.

At the same time, Reagent components can use immutable data structures all the way down, and only need to re-render (and thus create the actual React components) when their arguments change.

from reagent.

Ahh ok, thanks for explaining :)

from reagent.