In Reagent app, what is the different between these two in the hiccup section: (my-func param1 param2) [my-func param1 param2] Both work the same as far as I can tell.

@artur https://github.com/reagent-project/reagent/blob/master/doc/UsingSquareBracketsInsteadOfParens.md

Thanks for the linkj 🙂

the pithy answer is: no brackets = no component. brackets don’t immediately invoke the my-func function. instead a vector is returned and reagent will create a react component associated with my-func. if you invoke my-func directly, reagent never even learns about it.

Gotcha!

so we just ran into that annoying bug in prod where a component was written like so:

(defn my-component []
  (let [my-atom (r/atom {:value 0})
        my-value (:value @my-atom)]
     (fn [] [:div my-value])))

when my-atom is updated, the my-value binding is not

is there a way I could write a unit-level test for this?

sure--it’s hard to say exactly how because your example doesn’t show how the atom could ever be updated.

in real life it's a function that fetches data and returns an atom that represents the state of that request

so I'm imagining I would with-redefs that out of the way

I ended up doing something like this:

(t/deftest my-component-update
  (let [test-atom (atom {:value 0})]
    (with-redefs [create-atom (fn [_ _ _] test-atom)]
      (let [render-fn (my-component)]
        (t/is (test.helpers/tree-contains (render-fn) 0))
        (swap! test-atom assoc :value 1)
        (t/is (test.helpers/tree-contains (render-fn) 1)))))