title: React-three-fiber useEffect , useState, THREE.Clock
body: <p>I'm quite a newbie to R3F &amp; Three.js, I am having difficulty including a time value as a variable for a simple shader.</p>
  <p>I have a GLSL shader as a JavaScript file and I want to update the time value using uniform u_time</p>
  <p>I am trying to pass through the time variable using THREE.Clock in my React component. When I console.log the timer inside of my useEffect hook , I get the time console logged as a rounded value as I need it for the shader. However I am not sure how to return this value to use in my shader, as the u_time value. Is there something I am missing in my useEffect hook?</p>
  <p>React Component code</p>
  <pre><code>import React, { useRef, useEffect, useState } from &quot;react&quot;;
  import { Canvas, useThree, useFrame } from &quot;@react-three/fiber&quot;;
  import { vertexShader, fragmentShader } from '../Shaders/Shader';
  
      const ShaderPlane = (props) =&gt; {
          const [value, setValue] = useState(0);
          const mesh = useRef()
          const time = new THREE.Clock();
      
        useEffect(() =&gt; setInterval(() =&gt; setValue(time.getElapsedTime().toFixed(1)), 1000), []);
        console.log(value)
          
          return (
            &lt;Canvas&gt;
              &lt;ambientLight intensity={5} /&gt;
              &lt;spotLight position={[8, 3, 1]} penumbra={0.3} /&gt;
                &lt;mesh
                  {...props}
                  ref={mesh}
                  scale={[4,4,4]}
                &gt;
                &lt;planeBufferGeometry attach=&quot;geometry&quot;  /&gt;
                &lt;shaderMaterial
                  uniforms={{
                    u_time: { value: value },
                            }}
                    vertexShader={vertexShader}
                    fragmentShader={fragmentShader}
                         
                            /&gt;
      
                      &lt;/mesh&gt;
                  &lt;/Canvas&gt;  
          )
      }
      
      export default ShaderPlane;
  </code></pre>
  <p>Shader.js code</p>
  <pre><code>export const vertexShader = `
  void main()
  {
      // v_uv = uv;
      gl_Position = projectionMatrix * modelViewMatrix * vec4(position * 1.0, 1.0 );
      //turning the vec3 into a vec 4 by adding 1.0 to the end
  }
  `;
  
  export const fragmentShader = `
  uniform float u_time;
  void main()
  {
      vec3 color = vec3((sin(u_time) + 1.0)/2.0, 0.0, (cos(u_time) + 1.0)/2.0);
      gl_FragColor = vec4(color, 1.0);
  }
  `;
  </code></pre>
  <p>Appreciate your help :)</p>