# React scene with cannon lag why?

**URL:** <https://discourse.threejs.org/t/react-scene-with-cannon-lag-why/58285>\
**Category:** Questions\
**Tags:** react-threedrei, cannonjs\
**Created:** [November 18, 2023, 12:21am UTC](https://discourse.threejs.org/t/react-scene-with-cannon-lag-why/58285 "2023-11-18T00:21:46Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![espace3d](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/espace3d/32/26134_2.png) [@espace3d](https://discourse.threejs.org/u/espace3d)\
**Post date:** [November 18, 2023, 12:21am UTC](https://discourse.threejs.org/t/react-scene-with-cannon-lag-why/58285/1 "2023-11-18T00:21:46Z")

</div>

hi,

I have this scene : the principle is as follows: if the yellow cube overtakes the red instances, the green supports underneath disappear, so that the red instances fall.

The problem is that after the red instances have fallen, my yellow cube moves forward with a lot of lag. It seems from my tests that this is due to the displacement in my Support function, but I don’t see how I can change it to get correct performance. Can you help?

> **[2023 v2 test simple with monitoring - CodeSandbox](https://codesandbox.io/s/2023-v2-test-simple-with-monitoring-tftpd3)**
>
> A box dropping onto a plane using use-cannon / cannon-es.

---

<div class="post-metadata">

**Author:** ![espace3d](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/espace3d/32/26134_2.png) [@espace3d](https://discourse.threejs.org/u/espace3d)\
**Post date:** [November 18, 2023, 6:58am UTC](https://discourse.threejs.org/t/react-scene-with-cannon-lag-why/58285/2 "2023-11-18T06:58:24Z")

</div>

Hi,

Trying to remove the superfluous and adding some monitoring to make it clear that the scene is really struggling as soon as the instances fall, you can clearly see that the yellow cube is jerking forward. Why is this?

> **[2023 v2 test simple with monitoring - CodeSandbox](https://codesandbox.io/s/2023-v2-test-simple-with-monitoring-tftpd3)**
>
> A box dropping onto a plane using use-cannon / cannon-es.

---

<div class="post-metadata">

**Author:** ![seanwasere](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/seanwasere/32/20864_2.png) [@seanwasere](https://discourse.threejs.org/u/seanwasere)\
**Post date:** [November 18, 2023, 7:58am UTC](https://discourse.threejs.org/t/react-scene-with-cannon-lag-why/58285/3 "2023-11-18T07:58:21Z")

</div>

you are setting state in a `useFrame`

```javascript
  useFrame(
    ...
      setFlagTest(false)

```

Read [avoid-setstate-in-loops](https://docs.pmnd.rs/react-three-fiber/advanced/pitfalls#avoid-setstate-in-loops) and then read [instead,-just-mutate,-use-deltas](https://docs.pmnd.rs/react-three-fiber/advanced/pitfalls#%E2%9C%85-instead,-just-mutate,-use-deltas)

---

<div class="post-metadata">

**Author:** ![espace3d](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/espace3d/32/26134_2.png) [@espace3d](https://discourse.threejs.org/u/espace3d)\
**Post date:** [November 18, 2023, 8:01pm UTC](https://discourse.threejs.org/t/react-scene-with-cannon-lag-why/58285/4 "2023-11-18T20:01:35Z")

</div>

Hi

Thanks for the tips, I’ve modified the code accordingly, but I can’t see any improvement, the blue support is still jerky. I don’t understand why, the code is extremely simple.

> **[2023 v3 test simple with monitoring - CodeSandbox](https://codesandbox.io/s/2023-v3-test-simple-with-monitoring-zxz9pv?file=%2Fsrc%2FApp.js)**
>
> A box dropping onto a plane using use-cannon / cannon-es.

---

<div class="post-metadata">

**Author:** ![PavelBoytchev](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pavelboytchev/32/38639_2.png) [@PavelBoytchev](https://discourse.threejs.org/u/PavelBoytchev)\
**Post date:** [November 18, 2023, 8:39pm UTC](https://discourse.threejs.org/t/react-scene-with-cannon-lag-why/58285/5 "2023-11-18T20:39:13Z")

</div>

This fragment is causing jerkiness:

```javascript
      for (let i = 0; i < numInstance; i++) {
        at(i).position.subscribe((v) => {
          if (posPlayer[0] > v[0] && flagTest) {
            at(i).position.set(-6, 2, i * 2)
            at(i).velocity.set(0, 0, 0)
          }
        })
      }

```

I have no idea what does `subscribe` do, but whatever it does, that subscription is done every frame. Should it? When I make it execute only once, the jerkiness disappears.

---

<div class="post-metadata">

**Author:** ![espace3d](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/espace3d/32/26134_2.png) [@espace3d](https://discourse.threejs.org/u/espace3d)\
**Post date:** [November 19, 2023, 9:45am UTC](https://discourse.threejs.org/t/react-scene-with-cannon-lag-why/58285/6 "2023-11-19T09:45:06Z")

</div>

Hi,

I cleaned up my codesandbox by deleting all items and keeping only cube instances and support instances. I’m only applying a move to the [0] support instance, but even when I apply the recommendations [React Three Fiber Documentation](https://docs.pmnd.rs/react-three-fiber/advanced/pitfalls#%E2%9C%85-instead,-just-mutate,-use-deltas) , I can see that the code is rowing like crazy. I’m at a loss… if you could tell me how to implement moves and checks on instances, that would be great.

> **[2023 v5 minimal test Instance+physics lag with monitoring - CodeSandbox](https://codesandbox.io/s/2023-v5-minimal-test-instance-physics-lag-with-monitoring-p4p79q?file=%2Fsrc%2FApp.js)**
>
> A box dropping onto a plane using use-cannon / cannon-es.

---

<div class="post-metadata">

**Author:** ![seanwasere](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/seanwasere/32/20864_2.png) [@seanwasere](https://discourse.threejs.org/u/seanwasere)\
**Post date:** [November 19, 2023, 9:57am UTC](https://discourse.threejs.org/t/react-scene-with-cannon-lag-why/58285/7 "2023-11-19T09:57:19Z")

</div>

Next thing you should do is update all your dependencies.  
 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/5/b/5b5cb83b06050fc848272ed32fa7d17a2950181f.png)

You are using a very old @react-three/cannon  
And quite old @react-three/fiber & drei

Press the refresh icon when you hover over the dependency in the list

And if you remove `frameloop="demand"` it will fix `r3f-perf`.

This is not the full fix. Just some things that will help.