Hacker News Reader

Comment by mlsarecmg | Hacker News Reader

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.

View on HN

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

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

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.

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] }

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

Reply on news.ycombinator.com