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])))

@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.

@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

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

I am indeed using figwheel!

also reproducing it in klipse would help, like this: http://app.klipse.tech/?cljs_in.gist=viebel/9c0201a060d75b2c722d4e77dbf79907&container=1

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

@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)

haha oops

we should fix the reagent tutorial 🙂

😛

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

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

thx)