dom-node deprecation

[hkjels]

I've noticed in the changelog and the documentation that dom-node has been deprecated as of Reagent version 1.2. However, there doesn't seem to be clear guidance on what the recommended successor or alternative approach is for handling element references in this new context.

Could anyone shed light on how we should now approach element references in Reagent? Are there any idiomatic patterns or best practices that have emerged for dealing with this, especially in light of React's evolving API?

Any insights or examples would be greatly appreciated.

Thank you!

[Deraen]

React refs are the answer in React to access DOM nodes, and are much for versatile than getting the component top node: https://react.dev/reference/react/useRef

Unfortunately Reagent docs are pretty out of date regarding refs. React Features doc should probably include a section.

You can use the hook with functional components, or create a form-2 component with local state atom for el reference and a ref fn.

(let [ref (atom nil)
      ref-fn #(reset! ref %)]
  (fn []
     [:div {:ref ref-fn} ...]))

It is usually also good to create the ref-fn in the fn closure to ensure the fn value doesn't change on every render.
Storing the el reference in a ratom is potentially problematic, if you also deref the ratom, it would cause the component to re-renderer and potentially reset the ref, causing a render loop. But in some cases it is OK.