This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2020-05-12
Channels
- # announcements (1)
- # babashka (42)
- # beginners (114)
- # bristol-clojurians (2)
- # calva (7)
- # cider (4)
- # clj-kondo (7)
- # cljs-dev (37)
- # cljsrn (13)
- # clojure (114)
- # clojure-austin (3)
- # clojure-europe (5)
- # clojure-nl (10)
- # clojure-spec (77)
- # clojure-sweden (4)
- # clojure-uk (16)
- # clojurescript (52)
- # conjure (155)
- # core-async (18)
- # cursive (23)
- # datomic (20)
- # duct (2)
- # emacs (13)
- # figwheel (3)
- # figwheel-main (9)
- # fulcro (31)
- # gis (8)
- # helix (33)
- # jobs (12)
- # jobs-discuss (66)
- # kaocha (4)
- # lein-figwheel (1)
- # meander (16)
- # off-topic (5)
- # pathom (13)
- # pedestal (6)
- # quil (6)
- # rdf (17)
- # re-frame (32)
- # reagent (34)
- # reitit (30)
- # remote-jobs (1)
- # ring (2)
- # shadow-cljs (149)
- # spacemacs (1)
- # sql (8)
- # tools-deps (90)
- # xtdb (19)
reading the channel makes me question about how I use reagent and re-frame.. this is a typical view function from my app
(defn main-panel []
(let [fund-filters-loaded? @(rf/subscribe [:fund.filters.subs/loaded])
logged-profile @(rf/subscribe [:logged-profile])]
[:<>
[chart]
(if fund-filters-loaded?
[:<>
[filters {:suspended-enabled? false
:custom-filter #(custom-filter logged-profile)}]
[fund-list callback]]
[:div "loading..."])]))
this is a form-1 component according to reagent documentation
my question is, should it be form-2 and return a function instead?
@wvelezva what you wrote works. re-frame caches subscriptions, so when your component re-renders it will get the same subscription value every time
the reason you'd use a form-2 is it if you wanted something to only run on component mount (first render)
e.g.:
(defn my-component []
(let [count (r/atom 0)]
[:button {:on-click #(swap! count inc)} @count]))
(defn my-component []
(let [count (r/atom 0)]
(fn []
[:button {:on-click #(swap! count inc)} @count])))
☝️ that will create the count
atom on first render, and then only run the inner function each subsequent oneI understand, and that is not desirable so in my case with the subscriptions?
and only make the dereference in the inner fn?
(defn main-panel []
(let [fund-filters-loaded? (rf/subscribe [:fund.filters.subs/loaded])
logged-profile (rf/subscribe [:logged-profile])]
(fn []
[:<>
[chart]
(if @fund-filters-loaded?
[:<>
[filters {:suspended-enabled? false
:custom-filter #(custom-filter @logged-profile)}]
[fund-list callback]]
[:div "loading..."])])))
like I said above, you can use either a form-1 or form-2 because re-frame caches subscriptions
so is a matter of taste?
use form-2 if and only if, you are dealing with local states i.e using reagent to manage form state
other than that its preferred to use form 1
form 1 makes component simpler
since it only does one thing, renders component
thanks a lot!
how ever, if you still want to use form 1 component while managing local state
you can do that
there is a trick
I’m all ears….
(defn simple-form [args]
(reagent/with-let
[state (reagent/atom {:username ""})]
[:form
[:input {:type :text
:placeholder :username
:on-change #(swap! state assoc :username (-> % .-target .-value))
:value (:username @state)}]]))
the trick is to wrap the component with with-let
function
and voila, no more form-2
the code I inherited had those with-let
plus the subscriptions, when I started learning I didn’t see any difference between with-let
and the “simple” let
so I adopted that style
Anyone know if it is possible to configure the React Dev Tools to highlight updates to Reagent components? 🤞