3 ms·

I was scratching my head over this one too. Other answers in the thread don't seem right. I then realized this: const mesh = useRef(... assigns an instan

by lxe 5y ago

I was scratching my head over this one too. Other answers in the thread don't seem right. I then realized this: const mesh = useRef(... assigns an instance of something (`React.mutableRefObject`) to a variable in scope, but <mesh ... after compiling into normal JavaScript and becomes (0, _jsxRuntime.jsxs)("mesh"... (see `console.log(__SANDBOX_DATA__.data.transpiledModules['/src/App.js:'].source.compiledCode) `) So that's why you're not seeing the editor or runtime complain about this. `<mesh` (lowercase), as with other lowercased react elements get translated into `Something('mesh'`, and doesn't require a defined component variable. Think this: const div = 'not a div -- i am a string' return <div>{div}</div> Just one of the many gotchas of many layers of JavaScript/TypeScript/React/etc... programming environments.

strogonoff 5y ago
I’d answer the original question… > Is there an error in the examples? You have const mesh = useRef() ... <mesh ref={mesh} ... > You'll be rendering an undefined element (before the ref has a chance to attach). …as follows: 1. On that last line, <mesh> is just a regular element[0]. 2. Ref assignment makes this element’s instance accessible within component code[1] under a constant, here coincidentally (and confusingly, I must say) named “mesh”. The constant could’ve been named anything else, like “el”, and the example would work exactly the same way: const el = useRef() ... <mesh ref={el} ... 3. How come the constant in the original example does not shadow the equivalently named built-in JSX element? Well, there is a convention/hard-coded rule in React/JSX/TSX where it simply would not resolve lowercase identifiers to custom components. If we change “mesh” to “Mesh” in the original example, then the app would attempt to use the ref constant as a (malformed) custom component, and predictably throw. [0] https://www.w3.org/TR/2016/CR-SVG2-20160915/shapes.html#MeshElement https://www.w3.org/TR/2016/CR-SVG2-20160915/shapes.html#Mesh... [1] https://reactjs.org/docs/refs-and-the-dom.html#refs-and-function-components https://reactjs.org/docs/refs-and-the-dom.html#refs-and-func...
- dalmo3 5y ago
  Excellent explanation, thank you!

by lxe 5y ago

strogonoff 5y ago

I’d answer the original question… > Is there an error in the examples? You have const mesh = useRef() ... <mesh ref={mesh} ... > You'll be rendering an undefined element (before the ref has a chance to attach). …as follows: 1. On that last line, <mesh> is just a regular element[0]. 2. Ref assignment makes this element’s instance accessible within component code[1] under a constant, here coincidentally (and confusingly, I must say) named “mesh”. The constant could’ve been named anything else, like “el”, and the example would work exactly the same way: const el = useRef() ... <mesh ref={el} ... 3. How come the constant in the original example does not shadow the equivalently named built-in JSX element? Well, there is a convention/hard-coded rule in React/JSX/TSX where it simply would not resolve lowercase identifiers to custom components. If we change “mesh” to “Mesh” in the original example, then the app would attempt to use the ref constant as a (malformed) custom component, and predictably throw. [0] https://www.w3.org/TR/2016/CR-SVG2-20160915/shapes.html#MeshElement https://www.w3.org/TR/2016/CR-SVG2-20160915/shapes.html#Mesh... [1] https://reactjs.org/docs/refs-and-the-dom.html#refs-and-function-components https://reactjs.org/docs/refs-and-the-dom.html#refs-and-func...

dalmo3 5y ago
Excellent explanation, thank you!