Fork me on GitHub
#reagent
<
2020-04-08
>
furiel11:04:43

I got a little stuck with reagent with a cljs snippet below. I posted in #beginners channel, too, but it seems the topic is more complex. Can someone explain this behavior? I am experimenting with (hello-world) vs [hello-world]. The document renders in both cases, but h1 is only updated if I use [hello-world]. According to documentation https://reagent-project.github.io/docs/master/reagent.core.html#var-render, the second parameter of render can be vector of hiccup syntax. That's why I planned to just simply encapsulate into a function, and return with the vector. I think this is what is called form-1. I have read https://cljdoc.org/d/mthomure/reagent/0.8.1-custom-components/doc/frequently-asked-questions/why-isn-t-my-component-re-rendering- 1. Yes I am using ratom through import reference. 2. I do deref with @number. 3. My state is global. 4. It is not inside a seq. So to my understanding (hello-world) should work. Tried with reagent 0.8.1 (slightly modified code do to import changes) and 0.10.0 too without success. What am I missing?

(ns ^:figwheel-hooks proba.core
  (:require
   [goog.dom :as gdom]
   [reagent.dom :as rdom]
   [reagent.core :as reagent :refer [atom]]))

(defonce number (atom 0))

(defn hello-world []
  [:div
   [:h1 @number]
   [:button {:on-click #(swap! number inc)} "inc"]])

(rdom/render
 [hello-world] ; vs (hello-world)
 (gdom/getElement "app"))

juhoteperi12:04:57

calling the function directly (parenthesis) doesn't create a component, RAtoms work only inside components

furiel12:04:42

Thanks for the explanation. That explains why it does not work if I "expand" the function in place too.

(rdom/render
 [:div
  [:h1 @number]
  [:button {:on-click #(swap! number inc)} "inc"]]
 (gdom/getElement "app"))
So it must be render that converts to component, and does this only if the passed argument is a function. I also quickly tried to wrap into an anonymous function, and it starts to work again:
(rdom/render
 [(fn []
    [:div
     [:h1 @number]
     [:button {:on-click #(swap! number inc)} "inc"]])]
    (gdom/getElement "app"))
I think I understand now.