4 ms·
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 guarante
by mlsarecmg 5y ago
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 5y agoThe ref isn't used in an effect, though, at least not in the provided code.
- tills13 5y agoTo clarify, I'm not talking about the ref _prop_, I'm talking about them using the ref as the element.
- mlajtos 5y agoIt’s lowercase, so it will act as plain-old tag. If the name would be uppercase, that would be a bug you described.
- tills13 5y agohm, 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 5y agono 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] }