Fork me on GitHub
#reagent
<
2020-04-28
>
Lucy Wang10:04:55

FWIW I made some benchmarking between reagent, helix https://clojurians.slack.com/archives/CRRJBCX7S/p1588066976025300

๐Ÿ‘ 4
Lucy Wang10:04:24

(using latest stable version of reagent 0.10.0, not 1.0.0), config is here https://github.com/krausest/js-framework-benchmark/pull/726/files)

Spaceman13:04:13

how do you fire an event as soon as the component has loaded, i.e., onComponentMount?

aisamu13:04:56

Would the outer part of a form-2 component do the trick?

4
Lucy Wang14:04:49

@pshar10 With reagent 1.0.0 you can use functional components and react useState hooks.

Spaceman13:04:31

that's slightly verbose though. Is that the recommended way?

manutter5113:04:48

Yeah, as far as I know thatโ€™s the only way to do it, short of rolling your own interop with React and JS.

Lone Ranger13:04:22

it's not that bad @pshar10 there are just some pitfalls to be aware of. Use them all the time (for better/worse), ping if you run into trouble

Lone Ranger13:04:41

if for some reason you use them inline just remember they need to be wrapped in a vector

Spaceman13:04:59

what pitfalls do I need to be aware of?

Lone Ranger13:04:23

I use them with inputs frequently to focus/select on mount, i.e.

(reagent/create-react-class
 {:componentDidMount 
  (fn [this]
    (let [node (reagent.dom/dom-node this]
      (.select node)
      (.focus node)))
  :reagent-render 
  (fn [] [:input])})

Lone Ranger13:04:14

if you were to drop that inline, for instance, you would need to do something like

[:form 
 [:label "blah"]
 [(reagent/create-react-class
  {:componentDidMount 
   (fn [this]
     (let [node (reagent.dom/dom-node this]
       (.select node)
       (.focus node)))
   :reagent-render 
   (fn [] [:input])})]]

Lone Ranger13:04:27

(note that it is wrapped in a vector)

Lone Ranger13:04:30

as opposed to

Lone Ranger13:04:50

[:form 
 [:label "blah"]
 ;; this won't work
 (reagent/create-react-class
  {:componentDidMount 
   (fn [this]
     (let [node (reagent.dom/dom-node this]
       (.select node)
       (.focus node)))
   :reagent-render 
   (fn [] [:input])})]

Lone Ranger13:04:20

the other two pitfalls, I suppose, are to access the actual dom node from the lifecycle methods use reagent.dom/dom-node as indicated in the example and to make sure that your your render method is actually :reagent-render. If you use :render it will have intermittent bugs

aisamu13:04:56

Would the outer part of a form-2 component do the trick?

4
Spaceman13:04:17

@goomba This is better I think: (def foo-bar (with-meta identity {:component-did-mount #((foo-bar))})) (defn my-component [] [foo-bar [:div "Foo"] ] )

๐Ÿ‘ 4
Lone Ranger13:04:00

Cool! I've never seen that before ๐Ÿ™‚

Spaceman23:04:45

Has anyone tried #respo and #reagent both? What are the pros and cons of both?

Spaceman23:04:55

Which do you like better and why?