Fork me on GitHub
#reagent
<
2017-05-23
>
aisamu15:05:38

Hi! I'm struggling a little with a form-2 clock-like component. There seems to be one extra call to the render function under some circumstances. I've reduced it to the shortest example possible, but I still can't seem to grasp what's going under the hood.

(defn error-panel [outer-ratom]
  (let [now (reagent/atom (.now js/Date))
        interval 1000]
    (fn [inner-ratom]

      ;; If we de-ref inner-atom or outer-atom here, the setTimeout fn is called twice

      ;; (print (str @now))         ;; works fine
      ;; (print (str inner-ratom))  ;; works fine

      ;; (print (str @inner-ratom)) ;; this triggers a double call
      ;; (print (str @outer-ratom)) ;; this triggers a double call

      (js/setTimeout #(swap! now (partial + interval)) interval)
      [:p @now])))
I'd be thankful for any directions!

metametadata19:05:36

@aisamu I can't really reproduce it. I can see the double "#(swap! .." call only on hot reloading in figwheel/devcards. But this may be due to the page re-render triggering the evaluation of component body and then very soon the previous timer fires.

pesterhazy19:05:18

@aisamu not sure if this is your problem, but you shouldn't do side-effectful stuff in the render fn. The right place for that would be the component-did-mount and component-will-receive-props lifecycle methods

pesterhazy19:05:40

maybe it would help if you could articulate your surprise in terms of expectations and actual behavior?

aisamu19:05:49

I am indeed using figwheel!

aisamu19:05:53

@metametadata Rats, it appears to be a figwheel-only issue after all! Thanks for that!

aisamu20:05:21

@pesterhazy re: expectations and actual behavior - since the props didn’t change, I wasn’t expecting two calls to the render function. I agree that side-effects should be separated, but I took this pattern straight from Reagent’s intro 😅! (https://reagent-project.github.io - timer-component)

pesterhazy20:05:30

we should fix the reagent tutorial 🙂

a.espolov21:05:09

Guys. hiccup key :>(example usage [:> ......]) is React.createClass?

pesterhazy21:05:26

[:> js/Foo ...] is shorthand for (def foo (r/adapt-react-class js/Foo)) ... [foo ...]