# Is this the best way to render the sprite position each second using React-Three-Fiber?

**URL:** <https://discourse.threejs.org/t/is-this-the-best-way-to-render-the-sprite-position-each-second-using-react-three-fiber/27435>\
**Category:** Questions\
**Tags:** react-three-fiber\
**Created:** [June 22, 2021, 11:30am UTC](https://discourse.threejs.org/t/is-this-the-best-way-to-render-the-sprite-position-each-second-using-react-three-fiber/27435 "2021-06-22T11:30:16Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![nazrinnoorzan](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/nazrinnoorzan/32/19084_2.png) [@nazrinnoorzan](https://discourse.threejs.org/u/nazrinnoorzan)\
**Post date:** [June 22, 2021, 11:30am UTC](https://discourse.threejs.org/t/is-this-the-best-way-to-render-the-sprite-position-each-second-using-react-three-fiber/27435/1 "2021-06-22T11:30:16Z")

</div>

I’ve a React project that receives a position, color & camera data from an API. These three data are been stored in main App.js states and I pass these states as a prop to R3F Canvas component.

So far, I can see it is working well. The sprites position keep moving, so does the camera. My concern is, **is this the right way to render the sprite animations?**  **Will Canvas keep re-render by passing the App.js states to it?**

Here’s my codes for App.js, ThreeCanvas.js & ThreeCamera.js (All are in separate files)

App.js

```javascript
import ThreeCanvas from "./components/ThreeCanvas"

function App() {
  const [position, setPosition] = useState([])
  const [color, setColor] = useState([])
  const [camera, setCamera] = useState([])

  return (
    <div>
      // These p tags will keep render with the new values
      <p>Color 1: {color[0]}</p>
      <p>Color 2: {color[1]}</p>
      <p>Color 3: {color[2]}</p>
      
      // This is where ThreeCanvas component will be displayed
      <ThreeCanvas position={position} color={color} camera={camera} />
    </div>
  )
}

```

ThreeCanvas.js

```javascript
import spriteIdleTextureImg from "../img/sprite.png"
import ThreeCamera from "./ThreeCamera"

const spriteIdleTexture = new THREE.TextureLoader().load(spriteIdleTextureImg)

function ThreeCanvas({ position, color, camera }) {

  return (
    <>
      <Canvas colorManagement>

        // The position & color value will keep changing
        <sprite position={[position[0][0], 0, position[0][1]]}>
          <spriteMaterial map={spriteIdleTexture} color={color[0]} />
        </sprite>
        <sprite position={[position[1][0], 0, position[1][1]]}>
          <spriteMaterial map={spriteIdleTexture} color={color[1]} />
        </sprite>
        <sprite position={[position[2][0], 0, position[2][1]]}>
          <spriteMaterial map={spriteIdleTexture} color={color[2]} />
        </sprite>

        <ThreeCamera camera={camera} />
      </Canvas>
    </>
  )
}

```

ThreeCamera .js

```javascript
function ThreeCamera ({ camera }) {

  useFrame(state => {
    
    // The camera state will keep changing based on the camera props data
    state.camera.fov = THREE.MathUtils.radToDeg(camera.fov)
    state.camera.near = camera.near
    state.camera.far = camera.far
    state.camera.aspect = camera.aspect
    state.camera.updateProjectionMatrix()
    state.camera.position.set(...camera.eye)
    state.camera.up.set(...camera.up)
    state.camera.lookAt(...camera.at)
  })

  return null
}

```

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [June 22, 2021, 11:30am UTC](https://discourse.threejs.org/t/is-this-the-best-way-to-render-the-sprite-position-each-second-using-react-three-fiber/27435/2 "2021-06-22T11:30:29Z")

</div>

/cc

> <https://stackoverflow.com/questions/68082697/is-this-the-best-way-to-render-the-sprite-position-each-second-using-react-three>