Clojurians Log v2
helix
@ashnur I think I gave you the wrong info. Passing a map/array is ok, not because of helix, but because react could either accept a singular children or iterables of children, viz., in react.createElement(type, props, child1, child2) child1 and child2 could be either a simple child, or an array, or a cljs vector/map (because all cljs collection types satisfies js Symbol.iterator)
@wxitb2017 no worries, the code example from the source helped a lot and I figured a way that works for me 🙂
(apply react/createElement react/Fragment nil (mapv #($ CompName ...) (->clj files))
you should be able to use (helix.core/fragment (map #($ CompName ,,,) (->clj files))
Is this something new, not released yet or the <> macro?
ah sorry I meant <>
(<> (mapv (fn [[component, id, props]] (component (->js (merge props {:key id, :other "props for all"})))) [[GeneralInputComponent, "unique-id", {:specific "props"}]]))
this (or rather a much bigger version of it) results in hook errors and I can't understand why.
seems exactly like the kind of thing that would happen if I pass in duplicated keys for different components in the list though
or, if I am using some datastructure that doesn't keep order, but everything is in vectors
you're calling component like a function
you need to create an element out of it
I have to merge props deep
doesn't work with the $ macro
($ component {& (merge props {:key id, :other "props for all"}))& does exactly the same as merge though
"you need to create an element" that would require giving a name. Let me try this what you wrote last, I think I tried it before and something went wrong, but would be a good solution
you always have to create components as elements, you cannot call them like functions. it will not work like you expect
which is why you're getting hook errors
right, so I started using react/createElement
to which you answered and I didn't notice the $ in your example
works fine, thank you!
there are so many things to pay attention, it is quite easy to get in some bad loop of thinking trying everything but consistently missing something important
that might help 😛
using (apply react/createElement ,,,) is going to not force you to add keys to your components 🙂
hmm, will try 🙂
@lilactown I have ported the perf test to helix and intial results shows helix is 5x faster than reagent when creating 10k elements
https://github.com/krausest/js-framework-benchmark/tree/master/frameworks/keyed/reagent
500ms v.s 2300ms
code is here https://github.com/krausest/js-framework-benchmark/pull/727/files#diff-9cb26587be936b1d40969b511114df07R38
wow! thanks for doing that
The result for swapRows is wrong for helix ...
the prod build was overwritten by a dev build when I checkout branches
these things happen 🙂 benchmarks are tedious, thanks for doing this work, I will definitely try it out too!
the difference looks quite significant
That's great. https://github.com/roman01la/uix/blob/master/README.md#hiccup-interpretation claims to be 3x faster than reagent and 2x slower than react. Just for a relative comparison. It would be cool to compare uix on those performance measures too.
Sorry guys, there is a bug in my bench code, after fixing it the real results between helix/reagent is not that different ... https://github.com/krausest/js-framework-benchmark/pull/727/commits/ff352cec4fe3c702e7e123ef9a150a41735f0796
creating 10k elements, 3 rounds, react
the order of the screenshots are react-hooks, helix, reagent, react (contained in the image file name)
there is no significant differences among all of them.
It's good to know either way, and good to have the code too
I find that surprising. I don’t see the vector allocations in those graphs for reagent