DOM refs aren't accessible about reagent HOT 5 CLOSED

Thanks for spotting this – I really should have mentioned that in the documentation (and added a warning/assert to the code).

And it is quite impossible to solve, I'm afraid, at least using the same conventions as in plain React.

That is because Cloact doesn't render the entire tree returned by a component function in one go. It just turns the top-level children into React components (wrapping "native" components as necessary), and passes their children as Clojure data-structures unmodified.

That implies all sorts of benefits: for example you don't have to pay for the conversion between e.g maps and objects unless the child component actually needs to render. And child components get to play directly with the vectors and maps passed to them (and are free to "change" them, pass them along, and cache them), lazy evaluation of seqs, etc. Basically all the advantages of immutable data.

The downside is that this breaks refs, since the children's components will actually be rendered by them (and quite possibly not rendered at all).

Now, we could invent an alternative, that hopefully would work just as well. For example, we could wrap the child that you want to ref in a function/component that registers its child with the grand-parent on mount (or render), so that your example would become something like:

(defn login [props children this]
  [:form
   (cloact/register-ref this :username [:input#username {:type "text"}])])

(def login-with-focus
  (with-meta login
    {:component-did-mount (fn [this] (-> this cloact/refs :username cloact/dom-node (.focus)))}))

Btw, your particular example could be solved without refs, as in the todomvc example:

(def todo-edit (with-meta todo-input
                 {:component-did-mount #(.focus (cloact/dom-node %))}))

from reagent.

Wrapped Children
It's good to know that you don't plan on changing that design decision to wrap all children in a component. Do you think a large application would have memory problems due to there being a component associated with every DOM element?

Refs
I think your style of wrapping the input in a component function is actually the best way. It's more reusable and less complex than adding new functions to the API.

As you said it would be helpful to document best practices around accessing DOM nodes and how cloact.core/render-component converts functions and markup into components.

Let me know if I can help.

from reagent.

Wrapped Children
The memory overhead seems to be quite small: React has some optimization for single-children-components, and it is quite lean memory-wise anyway.

At least the Cloact demo page seems to work well on my phone - and that is actually quite heavy (as in thousands of components), since every single parenthesis in the code examples is its own component. :)

Refs
Definitely agree that some more docs (and especially examples) should be written. Even it might be a bit early to claim "best practices"...

from reagent.

But say, what if I want to focus and blur an input component from elsewhere? Either through a keyboard handler bound to the document in the parent component, or simply through a different component altogether?

from reagent.

String refs are legacy feature in React and are likely to be removed in future version: https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs

Ref callbacks work.

from reagent.