This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2018-03-04
Channels
- # beginners (149)
- # cider (1)
- # clara (12)
- # cljs-dev (226)
- # cljsrn (2)
- # clojure (275)
- # clojure-russia (5)
- # clojure-uk (14)
- # clojurescript (57)
- # cursive (23)
- # data-science (15)
- # datomic (1)
- # fulcro (8)
- # hoplon (9)
- # onyx (5)
- # portkey (15)
- # protorepl (1)
- # re-frame (8)
- # reagent (17)
- # shadow-cljs (22)
- # uncomplicate (13)
- # vim (36)
How does reagent deal with reusable components? The issue I have is that ratoms are basically in the functional closure of the render function, and by default all usages of that component share those atoms. Those atoms effectively represent the local state of the component, so I need an additional step to "instantiate" my component where it's used (to have the local component state effect)
E.g. you have a dropdown component, and what to keep some things in the local state, like whether the dropdown is open or not, you need to make something like this.
(defn make-dropdown[]
(let [local-state (r/atom nil)]
(fn [....]
;;render function here
)))
;;make an instance of the dropdown
(def customers-dropdown (make-dropdown))
;;and now use it
(defn mycomponent[]
....
[customers-dropdown ....]
....
)
You don't need to 'instantiate' the component. You can just call it directly inside of mycomponent as [make-dropdown]
(skipping the def customers-dropdown altogether)
i don't think that will work. that way every rendering of mycomponent will have a new localstate for dropdown
hmm, that looks suspiciously easy. how does reagent know when to create a new component instance, and when to use an already existing one?
i mean I could use my dropdown in 3 other components. and I want to have 3 instances, with 3 local states
You could even use make-dropdown
three times inside of one component, like mycomponent
and each would have it's own local ratom that gets closed over
thanks, but I still wonder how reagent can distinguish between creating a component and using it
@roti when reagent first creates a component, it calls the render function once. it inspects the return value from the render function. if the return value is a vector, then it is a form-1 component, and that original function becomes the render function. if the return value is a function, then the new returned function becomes the render function, and it is a form-2 component.