# useFrame hook generate the error R3F: Hooks can only be used within the Canvas component!

**URL:** <https://discourse.threejs.org/t/useframe-hook-generate-the-error-r3f-hooks-can-only-be-used-within-the-canvas-component/63932>\
**Category:** Questions\
**Tags:** r3f, react-three-fiber\
**Created:** [April 10, 2024, 8:25pm UTC](https://discourse.threejs.org/t/useframe-hook-generate-the-error-r3f-hooks-can-only-be-used-within-the-canvas-component/63932 "2024-04-10T20:25:47Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![0xMari](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/0xmari/32/45600_2.png) [@0xMari](https://discourse.threejs.org/u/0xMari)\
**Post date:** [April 10, 2024, 8:25pm UTC](https://discourse.threejs.org/t/useframe-hook-generate-the-error-r3f-hooks-can-only-be-used-within-the-canvas-component/63932/1 "2024-04-10T20:25:47Z")

</div>

Hi everyone! This is my first time posting here, and unfortunately, it is because of an error.

Here is the sandbox [link](https://yykvl4.csb.app/) of the code that, surprisingly, works fine. In my local view, I get the following error:

 ![Screenshot 2024-04-10](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/4/4/44ae9731a478bf0ac90b20489038a0f6c64fed26.jpeg)

I don’t understand where I could have done something wrong.  
The error appears every time I save the code, try to scroll, or change the visualization to test the responsiveness.

PS: the versions of react and react-dom match.

Thank you in advance for your time!

---

<div class="post-metadata">

**Author:** ![Liam\_Olsen](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/liam_olsen/32/46682_2.png) [@Liam\_Olsen](https://discourse.threejs.org/u/Liam_Olsen)\
**Post date:** [April 10, 2024, 8:26pm UTC](https://discourse.threejs.org/t/useframe-hook-generate-the-error-r3f-hooks-can-only-be-used-within-the-canvas-component/63932/2 "2024-04-10T20:26:49Z")

</div>

I can get that but it doesn’t blow my mind.

---

<div class="post-metadata">

**Author:** ![ShoOsaka](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/shoosaka/32/33293_2.png) [@ShoOsaka](https://discourse.threejs.org/u/ShoOsaka)\
**Post date:** [April 11, 2024, 1:17am UTC](https://discourse.threejs.org/t/useframe-hook-generate-the-error-r3f-hooks-can-only-be-used-within-the-canvas-component/63932/3 "2024-04-11T01:17:59Z")

</div>

Hello 0xMari san.  
Are you using `useFrame` outside of a Canvas? You’ll get that error if you try to use hooks like `useFrame` or `useThree` outside of the component that describes the R3F’s Canvas.  
For example, the following is a bad example.  
This is because hooks functions such as `useFrame` are being used outside of the Canvas.

```javascript
export const Scene = () => {

  // X: Error
  useFrame(() => {})

  return (
    <Canvas>
    </Canvas>
  )
}

```

The correct example is as follows:

```javascript
export const Scene = () => {

  return (
    <Canvas>
      <Pointer />
    </Canvas>
  )
}

const Pointer = () => {

  // O (Correct)
  useFrame(() => {})

  return (
    <></>
  )
}

```

Details Documents: [React Three Fiber Documentation](https://docs.pmnd.rs/react-three-fiber/api/hooks)

---

<div class="post-metadata">

**Author:** ![0xMari](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/0xmari/32/45600_2.png) [@0xMari](https://discourse.threejs.org/u/0xMari)\
**Post date:** [April 11, 2024, 11:09am UTC](https://discourse.threejs.org/t/useframe-hook-generate-the-error-r3f-hooks-can-only-be-used-within-the-canvas-component/63932/4 "2024-04-11T11:09:14Z")

</div>

Hi ShoOsaka,  
i am using useFrame in the correct way, as stated in the documentation, in the functions MetaBall and Pointer (I copied this example [https://codesandbox.io/p/sandbox/metaballs-yro193?file=%2Fsrc%2FApp.js](https://codesandbox.io/p/sandbox/metaballs-yro193?file=%2Fsrc%2FApp.js) ).

````javascript
function MetaBall({ color, vec = new THREE.Vector3(), ...props }) {
  const api = useRef();
  useFrame((state, delta) => {
    delta = Math.min(delta, 0.1);
    try {
      api.current.applyImpulse(
        vec
          .copy(api.current.translation())
          .normalize()
          .multiplyScalar(delta * -0.05)
      );
    } catch (e) {}
  });
  return (
    <RigidBody
      ref={api}
      colliders={false}
      linearDamping={4}
      angularDamping={0.95}
      {...props}
    >
      <MarchingCube strength={0.35} subtract={6} color={color} />
      <BallCollider args={[0.1]} type="dynamic" />
    </RigidBody>
  );
}

function Pointer({ vec = new THREE.Vector3() }) {
  const ref = useRef();
  useFrame(({ pointer, viewport }) => {
    const { width, height } = viewport.getCurrentViewport();
    vec.set(pointer.x * (width / 2), pointer.y * (height / 2), 0);
    try {
      ref.current.setNextKinematicTranslation(vec);
    } catch (e) {}
  });
  return (
    <RigidBody type="kinematicPosition" colliders={false} ref={ref}>
      <MarchingCube strength={0.5} subtract={10} color="orange" />
      <BallCollider args={[0.1]} type="dynamic" />
    </RigidBody>
  );
}```
````

---

<div class="post-metadata">

**Author:** ![0xMari](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/0xmari/32/45600_2.png) [@0xMari](https://discourse.threejs.org/u/0xMari)\
**Post date:** [April 11, 2024, 5:35pm UTC](https://discourse.threejs.org/t/useframe-hook-generate-the-error-r3f-hooks-can-only-be-used-within-the-canvas-component/63932/5 "2024-04-11T17:35:50Z")

</div>

I resolved the issue by recreating a new react app. I don’t know where it broke the first time but now everything is working.