This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2020-04-08
Channels
- # announcements (6)
- # babashka (78)
- # beginners (84)
- # bristol-clojurians (5)
- # calva (50)
- # chlorine-clover (45)
- # cider (14)
- # clj-kondo (18)
- # cljs-dev (2)
- # clojars (2)
- # clojure (387)
- # clojure-android (3)
- # clojure-europe (6)
- # clojure-gamedev (3)
- # clojure-germany (3)
- # clojure-nl (18)
- # clojure-spec (5)
- # clojure-uk (36)
- # clojurescript (8)
- # clojurex (1)
- # conjure (1)
- # css (1)
- # cursive (32)
- # data-science (1)
- # datomic (11)
- # docker (61)
- # duct (17)
- # emacs (7)
- # figwheel-main (3)
- # fulcro (19)
- # jobs-discuss (3)
- # joker (1)
- # leiningen (23)
- # malli (11)
- # mount (6)
- # off-topic (30)
- # pathom (14)
- # pedestal (2)
- # phzr (1)
- # re-frame (11)
- # reagent (3)
- # reitit (5)
- # ring-swagger (3)
- # rum (1)
- # shadow-cljs (113)
- # slack-help (9)
- # spacemacs (16)
- # specter (4)
- # sql (14)
- # vscode (2)
- # windows (3)
- # xtdb (12)
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.