@franquito You would write that component like this:

(defn main []
  (let [inner-ref (atom nil)]
    (fn []
      ^{:ref #(reset! inner-ref %)} [inner])))

that’s weird, React itself should take handle of assigning refs

I mean yes ref can be a function, but it can be an object as well where ref target is assigned under current field.

Right, from the documentation I understood that for the ref to be an object you also need to use React.forwardRef. But I wanted to understand what actually happens in this particular case of ^{:ref ref} [component]. I've seen adding :key as metadata, but never :ref. About your comment @josh604 I've tried running

(defn inner []
  [:div "Hello world!"])

(defn main []
  (let [inner-ref (r/atom nil)]
    (fn []
      ^{:ref #(js/console.log "Hi?")} [inner])))

Judging by the source code, I'm fairly certain the Reagent respects only :key in the metadata.

ha! ok, sorry for confusion

btw since Reagent passes all args as actual arguments you don’t need forwardRef

because in JS React ref prop is treated specially

yeah, it seems obvious now that you can’t get a ref on a component, only on a DOM element 🙂

hm, I think it should be possible to refer to an instance of a component via refs

according to the React docs, only on class-based components https://reactjs.org/docs/refs-and-the-dom.html

but again, might be not needed in Reagent, since components are functions, not classes with public APIs

yeah

on the other hand internally Reagent components are created as React classes 🙂

passing ref is confusing in React because they specifically dissoc it from props for class components. but reagent doesn’t pass in arguments as regular props, it all gets bundled into an argv prop

so if you give a reagent component a prop named ref it will work as you would expect

It seems that you can still make something interesting with metadata - Reagent passes it directly to createReactClass. But it's the metadata for a function itself - not its usage, like in [f props]. And the resulting React class becomes cached, where the function itself is the key. I.e. all usages of f must use the same metadata for the results to be predictable. Using (with-meta f) yields a different object, so the same f can be reused with different metadata.

Yeah, an example from the README:

(def component-with-callback
  (with-meta plain-component
    {:component-did-mount
     (fn [this]
       (reset! my-html (.-innerHTML (reagent/dom-node this))))}))

Ew

I ended up not needing it, but I was looking at using classes internally so I could tie information about the render method back to other actions.