Mesh re-render on mount and state change

[Iambizi]

Hello I'm experiencing an issue with my mesh; it seems to be re-rendering (twice) on every single mount or state change.

You can observe the problem in the video below. As I refresh the page a couple of times you can see it re-rendering, thus re-starting the animation very quickly.
I also tried to replicate the issue in this code sandbox but for some reason the issue is not happening on there.

Has anyone ever experienced something similar? I thought it had something to do with the textures I was mapping, but even when I remove them and simply make use of a color it keeps happening.

[drcmda]

these are all locals that get reset when the component re-renders

  let timerx = 500
  let hovering = !1
  let snapping = !1
  let mouseDown = !1

other than that, all that code is unnessesarey, you have events inbuilt in r3f and mousex/y is part of the state model which you can access inside useframe

useFrame(state => {
  state.mouse.x / y

i also don't understand why you init inside useFrame, useFrame is your access to the render loop, it runs 60 times per second. even if you wanted to register events, that's useEffect, which has a proper unmount phase for cleanup.

[Iambizi]

Thanks for the feedback. You're right, I can do away with the remaining ones, mouseDown included. Cleaned them up here

As for the init function, I definitely could have used a better name (changed it to animateMesh() ) but the intention here was to group all those functions into a single one and call it inside useFrame for better legibility. They all work towards animating the mesh hence why I thought they need to be in useFrame.

[drcmda]

it cant re-render unless something triggers it, but rendering does no harm, if it does you have side effects, usually things in the render function that shouldn't be there
i still look at that code and i have no idea why youre using event listeners and stuff like that
worse, youre creating them inside a useframe, which imo makes no sense and that is a mean side effect because these handlers stick, they're not cleared up. any hot reload will now double up handlers
r3f has event handling inbuilt, they can can all be removed. if you do have side effects, they always go into useEffect or useLayoutEffect without exception

[Iambizi]

ok, I see what you mean, particularly the issue relating to the event handlers doubling up.
I hadn't quite found the r3f mesh event handlers or thought to check if there were offered. I had started off with just plain threeJS when I wrote that.
The one thing I still need though is for these events to be triggered beyond the mesh as well. The animations should also be triggered by clicks anywhere on that canvas ( that I stretched out to fit the entire viewport ). As I read here the scope of these events are limited to to the mesh (besides onPointerMissed). Are there any approaches to apply these on the canvas element?