useFrame animation re-start

[Iambizi]

Hello I'm experiencing an issue with my animations, it seems that every-time the page is reloaded, it seems that every-time that I reload my page, the animation re-starts quickly a couple of times before allowing itself to run smoothly and allow my plane to assume it's intended position.

You can observe the problem in the video below. As I refresh the page a couple of times you can see it re-starting the animation multiple times, very quickly.

ScreeRecordIt.mov

What's very peculiar is that I have this code sandbox in which I tried to recreate the code and error to post in this discussion, but I can't reproduce it in the sandbox, the animation runs smoothly as I intended to be. I can't figure out what seems to be the difference between my local dev environment and this code sandbox, and what the animations issue is about.
I would really appreciate any feedback.

[drcmda]

this is the cause

export default function HomePlane1({ snapping, hover_dist, i, timerx, hovering, mouse }: Type): JSX.Element {
  const HomePlane = (props) => {
  ...
  }
  return <HomePlane ... />

you can't define components in components. the inner component does not have life cycles, gets unmounted/remounted every render. you don't need the HomePlane1 wrap at all.

ps 90% of that code can be thrown away. you don't need event handlers, all of that is taken care of (state.mouse.x/y). the function you call to animate creates hell for the garbage collector by making up further functions every frame. every where i see is functions in functions, but why ...

[Iambizi]

@drcmda I got myself down the path of using those event handlers because I also need these functions to be triggered beyond the mesh, if I click outside the mesh anywhere on the canvas (which I styled it to cover the entire viewport) they also need to be triggered.

      const onMouseDown = (e) => {
        snapping = true
      }

      const onMouseUp = (e) => {
        setTimeout(() => (snapping = false), 950)
      }
      const onDocumentMouseMove = (e) => {
        hovering = false
        mouse.x = e.clientX / window.innerWidth
        mouse.y = e.clientY / window.innerHeight
      }

From what I read here the scope of these built in events are limited to the mesh (besides onPointerMissed, but I would need it to be as precise as on mouseUp/down etc not just a click). Are there any approaches to apply these on the canvas element too and not just the mesh?