# requestAnimationFrame in React-Three-Fiber

**URL:** <https://discourse.threejs.org/t/requestanimationframe-in-react-three-fiber/41967>\
**Category:** Questions\
**Tags:** react-three-fiber\
**Created:** [August 28, 2022, 10:06am UTC](https://discourse.threejs.org/t/requestanimationframe-in-react-three-fiber/41967 "2022-08-28T10:06:28Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![AdarkSt](https://avatars.discourse-cdn.com/v4/letter/a/e19b73/32.png) [@AdarkSt](https://discourse.threejs.org/u/AdarkSt)\
**Post date:** [August 28, 2022, 10:06am UTC](https://discourse.threejs.org/t/requestanimationframe-in-react-three-fiber/41967/1 "2022-08-28T10:06:28Z")

</div>

I want to know can i fire animationFrame when needed. Actually now I has created basic Box component with react-three-fiber and not used useFrame hook into that, but in my browser performance view i see that animation frame fired. But in three js we can fire animationFrame when needed to do animation.

```javascript
type axis = 'x' | 'y' | 'z'
type rotation = {
    state: true | false,
    axis: axis,
    speed: number
}

export type BoxProps = {
    position?: Vector3,
    rotation?: Euler,
    color?: Color,
    geometryArgs?: [width:number, height:number, depth:number],
    hoveredColor?: Color,
    activeScale?: number
    rotate?: rotation
}

```

```javascript
import React, { useRef, useState } from "react"
import { BufferGeometry, Color, Material, Mesh, Vector3 } from "three"
import { BoxProps } from "./BoxProps"
import "@react-three/fiber"

export const Box = (props: BoxProps): React.ReactElement => {

    const mesh: React.Ref<Mesh<BufferGeometry, Material>> = useRef(null)

    const [hovered, setHovered] = useState(false)
    const [active, setActive] = useState(false)

    const {
        geometryArgs = [1,1,1],
        position = new Vector3(0,0,0),
        color = new Color(0,0,0),
        hoveredColor = new Color(0.5,0.5,0.5),
        activeScale = 2,
    } = props

    return (
        <mesh 
            ref={mesh} 
            position={position}
            onClick={():void=>setActive(!active)}
            onPointerOver={():void=>setHovered(true)}
            onPointerOut={():void=>setHovered(false)}
            scale={active ? activeScale : 1}
        >
            <boxGeometry args={geometryArgs}/>
            <meshBasicMaterial color={hovered? hoveredColor: color}/>
        </mesh>
    )
}

```

```javascript
function App() {
  return (
    <Canvas>
      <Box position={new Vector3(-2,0,0)} geometryArgs={[2,2,2]} />
      <Box position={new Vector3(2,0,0)} geometryArgs={[2,2,2]} />
    </Canvas>
  );
}

```

 ![screen_1](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/5/5/557b19d5a3f451e2e1af6a2420b22038da0efc09.png)  
 ![screen_2](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/6/2/62b93c46c6c20992e1b11ddaed0ef67c7f663ef1.png)

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [August 28, 2022, 1:36pm UTC](https://discourse.threejs.org/t/requestanimationframe-in-react-three-fiber/41967/2 "2022-08-28T13:36:41Z")

</div>

most webgl content is loop driven by default, fiber will also start a renderloop. that is perfectly fine and recommended. a running frameloop has often even performance benefits because it doesn’t need “warm up”, think of it as a running motor.

in any case you should not call requestAnimationFrame directly because more than 1 rafs impact performance badly. if you have something to animate you place it into useFrame, all useFrames will run in the same raf.

if you do not want a loop you can tell fiber that:

```nohighlight
<Canvas frameloop="demand">

```

if you now look into devtools the timeline is empty ([example](https://codesandbox.io/s/color-grading-wvgxp)). this will only render when a prop changes on any element. you can request a new frame/render by calling invalidate. this is what drei/orbitcontrols does for instance:

```nohighlight
export function OrbitControls(props) {
    const invalidate = useThree((state) => state.invalidate)

    React.useEffect(() => {
      const callback = () => invalidate()
      controls.addEventListener('change', callback)
      return () => controls.removeEventListener('change', callback)
   }, [])

```

that means now it will render when the user orbits the camera.

---

<div class="post-metadata">

**Author:** ![AdarkSt](https://avatars.discourse-cdn.com/v4/letter/a/e19b73/32.png) [@AdarkSt](https://discourse.threejs.org/u/AdarkSt)\
**Post date:** [August 28, 2022, 2:03pm UTC](https://discourse.threejs.org/t/requestanimationframe-in-react-three-fiber/41967/3 "2022-08-28T14:03:25Z")

</div>

@drcmda Thank you for answer, also i find that solution after posting this topic in react-three-fiber docs optimization section. Now i’m busy with researching and learning of react-three-fiber, just for that i starts thing about optimization and performance problems and his solutions in react-three-fiber anyway. Really grate thanks to you for your answer