Run React's useEffect at random intervals - reactjs

Question

I am new to React and ThreeJs. I am using react-three-fiber to animate a 3d model.
I have generated a React component that uses `useEffect to trigger some animations.
This code runs in an infinite loop it seems; I would like for the animation to run once, pause for a random number of seconds between 1 and 9, and then for the animation to run again.
import React, { useRef, useEffect } from 'react'
import { useGLTF, useAnimations } from '#react-three/drei'
export default function Model({ ...props }) {
const group = useRef()
const { nodes, materials, animations } = useGLTF('/blob.glb')
const { actions } = useAnimations(animations, group)
useEffect(() => {
console.log(actions)
actions.someAction.play()
});
return (
<group ref={group} {...props} dispose={null}>
<group position={[0.16, 0.21, 0]} scale={[1.13, 0.79, 1.13]}>
<mesh
...
How can I modify this so that the animations run at random intervals?

Answer 1

Without seeing the rest of your code, I can't say why it's running in an infinite loop. However, you're not passing [actions] as a dependency to your effect (in fact, you're not passing anything as a dependency) - which means that effect will run every time the component renders.
To get the result you're chasing though, I'd probably create a custom hook that takes care of the "re-run after a random delay" logic for you; something like this:
const useRandomlyRepeatedEffect = (effect, deps) => {
// Keep track of the currently running timeout so we can clear it
// if the component unmounts
const timeoutRef = useRef();
useEffect(() => {
const runAndWait = () => {
effect();
const delaySecs = Math.floor(Math.random() * 10);
timeoutRef.current = setTimeout(runAndWait, delaySecs * 1_000);
};
runAndWait();
// Cancel the timeout when the effect if the component unmounts.
return () => {
if (timeoutRef.current) {
clearTimeout(timeoutRef.current);
timeoutRef.current = undefined;
}
};
}, deps);
};
You don't have to do this - you could just have that inline in your component, but I'm a big fan of encapsulating custom logic in hooks.
Then, instead of your useEffect, you should be able to substitute it with useRandomlyRepeatedEffect:
export default const Model = (props) => {
// const actions = /* .... */
useRandomlyRepeatedEffect(() => {
actions.someAction.play;
}, [actions]);
};
Note here that [actions] is being supplied as a dependency to the effect.