r3f is a custom renderer, there is no difference in useRef between a div or a mesh, refs give you the underlying object. lowercase elements are native elements (div, span, mesh, view, box), they are defined by the renderer. uppercase is for components.
Ah, if they're using a custom JSX Pragma it might make sense. Still a little too bespoke for me.
no special jsx pragma needed. this is actually just plain react, <div> <span> and so on come from react-dom, which defines these elements. other renderers define theirs. here's a mini custom renderer if this interests you: https://codesandbox.io/s/reurope-reconciler-hd16y
Yeah, I don’t have experience with this lib, but the example code looks overly magic. But I’m also more of a backend dev, and find the useRef API to be inherently confusing, so that’s probably part of it.
I don't really like this though, although interesting, it feels like a hack and might not integrate well with tooling (e.g. the Typescript example).
How I would have implemented it was exposition a Mesh component which wraps this, and a useMesh hook to wrap and type the ref.