Reagent doesn't rerender component with deref-ing inside of let

Question

I have atom foo:

(defonce foo (r/atom "foo"))

I have parent component:

(defn parent-component []
  (js/setTimeout #(reset! foo "bar") 5000)
  (child-component {:foo foo}))

And I have child component:

(defn child-component [props]
  (let [derefed (deref (:foo props))]
    (fn []
      [:div
       [:p derefed]
       [:p (deref (:foo props))]])))

Only second paragraph is updated after reseting foo.

Why is it working that way?

user_1492584 · Answer

From the re-frame documentation regarding Form-2 components: https://github.com/Day8/re-frame/wiki/Creating-Reagent-Components#form-2--a-function-returning-a-function.

You need to repeat the outer function parameters again in the inner function:

(defn child-component [props]
  (fn [props]
    (let [derefed (deref (:foo props))]
      [:div
       [:p derefed]
       [:p (deref (:foo props))]])))

Reagent doesn't rerender component with deref-ing inside of let

1 Answers