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"))
calling the function directly (parenthesis) doesn't create a component, RAtoms work only inside components
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.