Move computationally expensive animations out of useFrame?

[kfei]

According to the document, useFrame allows us to execute code on every frame rendered. However, there are cases that we don't want to put in every 1/60 seconds. What is the recommended way of doing this?

For example, I have a mesh, which:

1. rotates its rotation.y on each frame.
2. changes its position based on a heavy computation every second

What I'm doing right now is:

const Box: React.FC = (props) => {
    const meshEl = React.useRef<Mesh>(null!);

    React.useEffect(() => {
        const timer = setInterval(() => {
            meshEl.current.position.set(someHeavyComputations());
        }, 1000);
        return () => clearInterval(timer);
    })

    useFrame(() => {
        meshEl.current.rotation.x = meshEl.current.rotation.y += 0.01;
    });

    return (
        <mesh ref={meshEl} material={defaultMaterial}>
            <boxBufferGeometry args={[3, 3, 3]} />
        </mesh>
    )
}

Any better way to achieve this?
Thank you.

[drcmda]

I would probably use setState for this and tie it up to the view

[cholazzzb]

I solve this with this code

const Box: React.FC = (props) => {
    const meshEl = React.useRef<Mesh>(null);

    let prevTime = 0, currTime

    useFrame(({clock}) => {
        currTime = clock.getElapsedTime()
        if(currTime - prevTime > 60){
             meshEl.current.position.set(someHeavyComputations());
             prevTime = clock.getElapsedTime()
        }

        meshEl.current.rotation.x = meshEl.current.rotation.y += 0.01;
    });

    return (
        <mesh ref={meshEl} material={defaultMaterial}>
            <boxBufferGeometry args={[3, 3, 3]} />
        </mesh>
    )
}