Discussion on: Need assistance with useEffect() dependencies

Unfortunately I found it a bit hard to tell what's wrong because I can't see the whole thing to run it and debug it. It seems like it should be working.

Nevertheless, consider trying something like this to keep the code more clear and maybe fix the issues (depending on what the rest of the code is dong):

const reqRef = useRef()
const previousTimeRef = useRef()

const animate = time => {
    // some animation

    previousTimeRef.current = time
    reqRef.current = requestAnimationFrame(animate)
}

useEffect(() => {
    if (!shouldStop) {
        reqRef.current = requestAnimationFrame(animate)
    }
    return () => cancelAnimationFrame(reqRef.current)

}, [shouldStop])

Changes made:

• Don't have a cancelAnimationFrame call in animate if animate doesn't decide when the animation will finish. It looks like only the value of shouldStop decides whether the animation should run or not, which is not changed inside animate.
• In useEffect, don't start a new animation if it shouldn't be running.

Another suggestion, consider changing shouldStop (a negative condition) to isAnimating (a positive condition) and invert the conditionals. Working with double negative conditions like if (!shouldStop) is more difficult than working with positive conditions if (isRunning).

Good luck :)