without ref, how to find a dom inside the component? I want focus on a input tag when a button is clicked.

You could still do that with refs, but another option is to just use id’s and document.getElementById

It seems ref is not recommend by React?

ref is definitely recommended by React

but ultimately it is the same thing as passing an atom around

a common thing people do is this:

(defn my-form []
  (let [input-ref (r/atom nil)
        handle-click (fn [] (when @input-ref (.focus @input-ref)))]
    (fn []
      [:div
       [:button {:on-click handle-click} "Focus"]
       [:input {:ref (fn [ref] (when ref (reset! input-ref ref)))}]])))

what React dissuades is using “string refs”

which was an old API that they’ve deprecated. the ☝️ above is using callback refs, which are definitely supported

wow

@lilactown why there is a (when ref?

sometimes the callback passed into the ref prop will be called with a nil value, I’m not totally clear why

allright thanks

The docs call that behaviour out: https://reactjs.org/docs/refs-and-the-dom.html#caveats-with-callback-refs (and indeed moving the (fn [ref.. to the outer let/mount-phase solved it for me in the past)

ah, thank you!