Fork me on GitHub
#reagent
<
2017-01-30
>
richiardiandrea18:01:45

again fighting with form-3 components, if I have:

(defn graph [clicked hovered attrs graph-data]
  (log/debug "Init: clicked" clicked)
  (log/debug "Init: hovered" hovered)
  (log/debug "Init: attrs" attrs)
  (log/debug "Init: graph-data" graph-data)
  (r/create-class
   {:display-name "graph-container"
    :reagent-render graph-render
    :component-did-update (fn [this] .....how do I get the individual props here? ...)
    :component-did-mount (fn [this] .....or here? ...))

richiardiandrea18:01:05

I tried:

(let [state (r/props this)]
                             (log/debug "graph-did-mount" state)
                             (graph! state))
and it indeed worked when I had one prop

richiardiandrea18:01:18

but now I have many (same passed to the rendered btw)

kishanov19:01:56

@richiardiandrea one of the ways to do it is the following

(defn component-form-3 [arg1 arg2 arg3]
  (reagent/create-class
    {:component-function
     (fn [arg1 arg2 arg3] [:div])

     :component-did-update
     (fn [this]
       (let [[_ new-arg1 new-arg2 new-arg3] (reagent/argv this)]
         ; do something
         ))}))

kishanov19:01:37

(reagent/argv this) inside :component-did-update can be destructured into the same args as passed to the component + 1st argument will be something else

richiardiandrea19:01:01

I am interesting in did-mount as well, I am trying, a big thanks!

kishanov19:01:19

same signature, I believe

richiardiandrea19:01:25

@kishanov works in did-mount as well yes!

richiardiandrea19:01:52

this definitely needs a blog post 😉

pesterhazy19:01:41

@richiardiandrea I started recalcictrant with this kind of difficulty in mind

richiardiandrea19:01:16

oh cool interesting

pesterhazy19:01:34

if you use the "new-props" mixin, the function will simply get the (new) props as arguments, just like the render fn

pesterhazy19:01:15

reagent's handling of lifecycle methods is opaque, the goal is to make it a bit more transparent

pesterhazy19:01:09

the pattern you were looking for (do something both on mount and on update) is pretty common in my experience

richiardiandrea19:01:27

yeah, I see that now with d3

richiardiandrea19:01:05

re-com components are smooth to use, this stuff is hard-core and not as simple as it should be

pesterhazy19:01:43

yeah you need form-3 components in a couple of scenarios

pesterhazy19:01:39

- XHR requests or other network activity like websockets (if you choose to tie them to the component) - timers - direct dom manipulation - resource cleanup - multimedia (canvas, webgl) - imperative web APIs (video)

pesterhazy19:01:26

luckily you can often stash away the side-effecting complexity in a wrapper Higher Order Component

richiardiandrea19:01:59

yes the thing is that I need to re-render my d3 graph (direct DOM) on every mouse event