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 ....]
....
)

are there other ways to do this? or at least with a more elegant api?

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

The reason you have that nested fn is to avoid that

So it will only get created the one time

https://github.com/reagent-project/reagent/blob/master/docs/CreatingReagentComponents.md#form-2--a-function-returning-a-function

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

but I have to say, pretty clever

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

so you mean it's actually the expected behaviour

Yeah, it is a form-2 component (docs linked above)

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.

I might put this behavior in the Too Clever By Half folder, except that it allows you to use reagent using normal function and no macros, which is pretty impressive