title: Using refs in Three JS useFrame hook
body: <p>Using react-three-fiber often requires using refs to manipulate objects in the scene. For example, we might want to move a mesh's position on every frame render (see code below).</p>
  <p>However, refs in typescript are always potentially undefined. So we have to check if our <code>meshRef</code> is current before we manipulate it:</p>
  <pre class="lang-js prettyprint-override"><code>  useFrame((state) =&gt; {
      if (meshRef.current) {
        meshRef.current.position.add(new Vector3(1, 1, 1));
      }
    });
  </code></pre>
  <p>But I imagine that we want the code in our <code>useFrame</code> hook to be highly optimized. If we were using regular javascript react, there'd be no need for the <code>if(meshRef.current)</code>. So it seems that just by using typescript, we're sacrificing some performance.</p>
  <p>Is there any way around this that doesn't involve telling the typescript compiler to ignore the potential undefined value? i.e <code>//@ts-ignore</code></p>
  <p>Full code example:</p>
  <pre class="lang-js prettyprint-override"><code>import React, { useRef } from &quot;react&quot;;
  import { Canvas, extend, useFrame, useThree } from &quot;@react-three/fiber&quot;;
  import &quot;./styles.css&quot;;
  import { Mesh, Vector3 } from &quot;three&quot;;
  
  const Scene = (): JSX.Element =&gt; {
    const meshRef = useRef&lt;Mesh&gt;();
    useFrame((state) =&gt; {
      if (meshRef.current) {
        meshRef.current.position.add(new Vector3(1, 1, 1));
      }
    });
  
    return (
      &lt;Canvas camera={{ fov: 75, position: [0, 0, 70] }}&gt;
        &lt;mesh ref={meshRef}&gt;
          &lt;boxBufferGeometry args={[10, 10, 1]} /&gt;
        &lt;/mesh&gt;
      &lt;/Canvas&gt;
    );
  };
  
  export default Scene;
  
  </code></pre>