[mlsarecmg]

this is how refs work. it's the same with a div. the ref will be filled in useEffect, not before.

null! is a common typescript thing, it is a semantic guarantee that the ref is static and hence will be available. this saves you the if (ref.current) { ... } check.

[tills13]

To clarify, I'm not talking about the ref _prop_, I'm talking about them using the ref as the element.

[mlajtos]

It’s lowercase, so it will act as plain-old tag. If the name would be uppercase, that would be a bug you described.

[tills13]

hm, interesting. I didn't know that -- I knew about custom tags / variable tags but never knew it _required_ them to be PascalCased. I feel like if I saw code like this come from one of my team members I'd ask them to change the name of the ref.

[mlsarecmg]

no ref is used as an element in that code.

    const ref = useRef()
    useEffect(() => console.log(ref), [])
    return <div ref={ref} />

will return { current: [dom node] }

    const ref = useRef()
    useEffect(() => console.log(ref), [])
    return <mesh ref={ref} />

will return { current: [mesh node] }

[tills13]

The ref isn't used in an effect, though, at least not in the provided code.